/* Add at the top of your file */
:root {
    /* Typography */
    --font-primary: "neue-haas-grotesk-display", sans-serif;  /* Main font used across the site */
    --font-secondary: "freight-text-pro", serif;              /* Secondary font for specific elements */
    
    /* Colors */
    --color-text: #333;        /* Main text color */
    --color-accent: #ff0000;   /* Accent color for hover states and highlights */
    --color-grey: #8888886e;   /* Used for secondary text and nav links */
    
    /* Header Heights - Controls the fixed height of the header */
    --header-height-desktop: 5rem;  /* Height of header on desktop (80px) */
    --header-height-mobile: 4rem;   /* Height of header on mobile (64px) */
    
    /* Header Padding - Controls the left/right spacing inside header */
    --header-padding-desktop: 2rem;  /* Side padding on desktop (32px) */
    --header-padding-mobile: 1rem;   /* Side padding on mobile (16px) */
    
    /* Logo - Desktop measurements */
    --logo-size-desktop: 2rem;              /* Height of logo on desktop (32px) */
    --logo-y-desktop: 1rem;              /* Vertical alignment on desktop */
    --logo-x-desktop: 1rem;                /* Horizontal position on desktop */

    /* Logo - Mobile measurements */
    --logo-size-mobile: 2rem;             /* Height of logo on mobile (24px) */
    --logo-y-mobile: 0.625rem;                 /* Vertical alignment on mobile */
    --logo-x-mobile: 0;                 /* Horizontal position on mobile */
    
    /* Navigation - Desktop */
    --nav-margin-desktop: 2rem 2rem 0 auto;     /* Spacing for nav menu on desktop */
    --nav-link-spacing-desktop: 1.618rem;    /* Space between nav links (golden ratio) */
    
    /* Navigation - Mobile */
    --nav-margin-mobile: 0 1rem 0 auto;      /* Spacing for nav menu on mobile */
    --nav-link-spacing-mobile: 1rem;         /* Space between nav links on mobile */
    
    /* Z-index Layers */
    --z-header: 1000;                        /* Ensures header stays above other elements */
    
    /* Header Layout - Desktop */
    --header-background: white;              /* Header background color */
    
    /* Header Layout - Mobile */
    --header-height-mobile: 3rem;            /* Fixed header height on mobile (64px) */
    --header-padding-mobile: 1rem;           /* Side padding on mobile (16px) */

    /* Container Layout - Desktop */
    --container-padding-desktop: 1rem;          /* Standard padding (16px) for desktop containers */
    --container-padding-large-desktop: 2rem;    /* Larger padding (32px) for emphasis sections */
    --hero-height-desktop: 70vh;                /* Hero takes 70% of viewport height on desktop */
    
    /* Container Layout - Mobile */
    --container-padding-mobile: 0.5rem;         /* Reduced padding (8px) for mobile containers */
    --container-padding-large-mobile: 1rem;     /* Reduced large padding (16px) for mobile */
    --hero-height-mobile: 50vh;                 /* Hero takes 50% of viewport height on mobile */
    
    /* Grid Layout - Desktop */
    --grid-auto-desktop: auto;                  /* Sizes rows based on content height */
    --grid-fluid-desktop: 1fr;                  /* Takes up remaining available space */
    --grid-gap-desktop: 2rem;                   /* Space between grid items (32px) */
    
    /* Grid Layout - Mobile */
    --grid-auto-mobile: min-content;            /* Sizes rows to minimum needed height */
    --grid-fluid-mobile: minmax(0, 1fr);        /* Flexible space with minimum 0 to prevent overflow */
    --grid-gap-mobile: 1rem;                    /* Reduced space between items (16px) */

    /* Work Grid Layout - Desktop */
    --work-grid-columns-desktop: 3;            /* Number of columns on desktop */
    --work-grid-direction-desktop: row;        /* Items flow horizontally on desktop */
    --work-grid-gap-desktop: 2rem;            /* Space between grid items (32px) */
    --work-grid-padding-desktop: 1rem;        /* Padding around grid (32px) */
    --work-grid-max-width: 1400px;            /* Maximum grid width */
    --work-grid-min-height: 100vh;            /* Minimum grid height */

    /* Work Grid Layout - Mobile */
    --work-grid-columns-mobile: 1;            /* Single column on mobile */
    --work-grid-direction-mobile: column;     /* Items stack vertically on mobile */
    --work-grid-gap-mobile: 1rem;            /* Reduced spacing (16px) */
    --work-grid-padding-mobile: 1rem;        /* Reduced padding (16px) */

    /* Work Grid Article Spacing - Desktop */
    --article-padding-desktop: 1.25rem 1.25rem 1.25rem 0.625rem;  /* 20px 20px 20px 10px */
    --article-sticky-top-desktop: 6rem;                           /* 96px */

    /* Work Grid Article Spacing - Mobile */
    --article-padding-mobile: 1rem 1rem 1rem 0.5rem;              /* 16px 16px 16px 8px */
    --article-sticky-top-mobile: 4rem;                            /* 64px */

    /* Work Project Layout - Desktop */
    --project-padding-desktop: 1.25rem;        /* Spacing inside project cards (20px) */
    --project-max-width-desktop: 70%;          /* Width limit for larger screens */
    
    /* Typography - Desktop */
    --project-description-size-desktop: 1.1rem; /* Comfortable reading size on desktop */
    --project-line-height-desktop: 1.6rem;     /* Spacious line height for readability */
    
    /* Typography - Mobile */
    --project-description-size-mobile: 1rem;    /* Slightly smaller text for mobile */
    --project-line-height-mobile: 1.4rem;      /* Tighter lines for mobile screens */
    
    /* Icon Spacing - Consistent across devices */
    --project-summary-icon-spacing: 0.6rem;     /* Space between text and star icon */
    --project-summary-icon-offset: 0.05rem;     /* Fine-tuning of icon vertical position */
    
    /* Colors */
    --project-text-color: #222;                /* Soft black for text */
    --project-hover-color: #ff0000;            /* Red accent for hover states */

    /* Article Layout - Desktop */
    --article-logo-top-desktop: 3rem;          /* Logo distance from top */
    --article-grid-gap-desktop: 2rem;          /* Space between columns */
    --article-margin-desktop: 1rem 10rem 2rem 16rem; /* Page margins */
    --article-max-width-desktop: 1400px;       /* Maximum content width */
    --article-content-width-desktop: 70%;      /* Content width limit */
    --article-sidebar-width-desktop: 20%;      /* Sidebar width */
    --article-summary-offset-desktop: -6rem;   /* Summary vertical position */
    --article-summary-indent-desktop: -0.4rem; /* Summary left indent */
    --article-sidebar-top-desktop: 12rem;      /* Sidebar distance from top */
    
    /* Article Layout - Mobile */
    --article-logo-top-mobile: 2rem;           /* Reduced top spacing for logo */
    --article-grid-gap-mobile: 1rem;           /* Reduced column gap */
    --article-margin-mobile: 0.5rem 1rem 1rem; /* Smaller margins */
    --article-content-width-mobile: 100%;      /* Full width content */
    --article-summary-offset-mobile: 1rem;     /* Adjusted summary spacing */
    --article-summary-indent-mobile: 0;        /* Remove indent on mobile */
    --article-sidebar-top-mobile: 0;           /* Reset sidebar positioning */
    
    /* Typography - Desktop */
    --article-title-size-desktop: 5rem;        /* Large title */
    --article-summary-size-desktop: 1rem;      /* Summary text size */
    
    /* Typography - Mobile */
    --article-title-size-mobile: 3rem;         /* Smaller title */
    --article-summary-size-mobile: 0.9rem;     /* Smaller summary */

    /* Article Content Layout - Desktop */
    --article-content-width-desktop: 70%;      /* Main content width */
    --article-image-width-desktop: 130%;       /* Image overflow width */
    --article-figure-padding-desktop: 1rem 0;  /* Figure spacing */
    --article-caption-padding-desktop: 0.5rem 0; /* Caption spacing */
    --article-subtitle-padding-desktop: 2rem 0; /* Subtitle spacing */
    
    /* Article Content Layout - Mobile */
    --article-content-width-mobile: 100%;      /* Full width content */
    --article-image-width-mobile: 100%;        /* Contained images */
    --article-figure-padding-mobile: 0.75rem 0;/* Reduced figure spacing */
    --article-caption-padding-mobile: 0.25rem 0;/* Reduced caption spacing */
    --article-subtitle-padding-mobile: 1.5rem 0;/* Reduced subtitle spacing */
    
    /* Typography - Desktop */
    --article-text-size-desktop: 1.1rem;       /* Body text size */
    --article-line-height-desktop: 1.6rem;     /* Text line height */
    
    /* Typography - Mobile */
    --article-text-size-mobile: 1rem;          /* Smaller body text */
    --article-line-height-mobile: 1.4rem;      /* Tighter line height */
    
    /* Colors */
    --article-text-color: #222;                /* Main text color */
    --article-caption-color: #666;             /* Caption text color */

    /* Article List Layout - Desktop */
    --article-list-margin-desktop: 0 0 0 0.5rem;  /* List indent alignment */
    --article-list-top-desktop: 16rem;             /* Fixed position from top */
    --article-list-title-spacing-desktop: 1.5rem 0 0.4rem; /* Title margins */
    --article-list-font-size-desktop: 1rem;        /* List text size */
    
    /* Article List Layout - Mobile */
    --article-list-margin-mobile: 0;               /* Remove indent on mobile */
    --article-list-top-mobile: 0;                  /* Reset top position */
    --article-list-title-spacing-mobile: 1rem 0 0.3rem; /* Reduced spacing */
    --article-list-font-size-mobile: 0.9rem;       /* Smaller text size */

    /* Typography - Desktop */
    --font-size-hero-desktop: 5rem;           /* Large hero text */
    --font-size-h2-desktop: 4rem;             /* Section headings */
    --hero-width-desktop: 70%;                /* Hero text container */
    --heading-margin-desktop: 2rem 0 0;       /* Standard heading spacing */
    
    /* Typography - Mobile */
    --font-size-hero-mobile: 3rem;            /* Smaller hero for mobile */
    --font-size-h2-mobile: 2.5rem;            /* Smaller headings */
    --hero-width-mobile: 100%;                /* Full width on mobile */
    --heading-margin-mobile: 1.5rem 0 0;      /* Reduced spacing */
    
    /* Colors */
    --text-color-grey: #888;                  /* Grey text variant */

    /* Footer - Desktop */
    --footer-padding-desktop: 0.5rem 0.4rem;   /* Padding around footer */
    --footer-background: white;                /* Footer background color */
    --footer-left-desktop: 2rem;              /* Left alignment matching grid */
    
    /* Footer - Mobile */
    --footer-padding-mobile: 1rem 1rem;   /* Reduced padding for mobile */
    --footer-margin-top-mobile: 2rem;         /* Space above footer */

    /* Typography - Desktop */
    --font-size-small: 1rem;                  /* Small text size */
    --letter-spacing-small: 0.05rem;          /* Subtle letter spacing */

    /* Typography - Small Text & Superscript */
    --font-size-sup-desktop: 1rem;            /* Superscript text size */
    --letter-spacing-sup: 0.05rem;            /* Subtle letter spacing */
    --font-weight-sup: 300;                   /* Light weight */
    
    /* Typography - Small Text & Superscript - Mobile */
    --font-size-sup-mobile: 0.875rem;         /* Slightly smaller on mobile */

    /* Colors */
    --color-background: white;
    
    /* Spacing System */
    --spacing-small: 1rem;
    --spacing-medium: 2rem;
    --spacing-large: 2.6rem;
    
    /* Z-index layers */
    --z-index-header: 1;

    /* Main heading - Mobile typography */
    --font-size-h1-mobile: 3rem;              /* Mobile heading size */

    /* Typography - Line heights */
    --line-height-heading-desktop: 1.2;        /* Headings line height */
    --line-height-heading-mobile: 1.3;         /* Slightly looser for mobile */
    
    /* Typography - Font weights */
    --font-weight-light: 300;                  /* Light weight */
    --font-weight-regular: 400;                /* Regular weight */

    /* Work Grid - Tablet */
    --work-grid-columns-tablet: 2;             /* Two columns for tablet */
    --grid-gap-tablet: 1.5rem;                /* Grid spacing for tablet */
    --work-grid-padding-tablet: 2rem;         /* Consistent padding for tablet */

    /* Thoughts Page Layout - Desktop */
    --thoughts-grid-columns-desktop: 1fr 2fr;     /* Two-column asymmetric layout: sidebar (1 part) and main content (2 parts) */
    --thoughts-grid-gap-desktop: 2rem;            /* 32px spacing between grid elements for visual breathing room */
    --thoughts-grid-padding-desktop: 2rem;        /* 32px outer spacing around the grid container */
    --thoughts-grid-max-width: 1400px;            /* Maximum width to ensure readability on large screens */
    --thoughts-project-width-desktop: 70%;        /* Width constraint for project containers to maintain clean layout */

    /* Thoughts Page Layout - Mobile */
    --thoughts-grid-columns-mobile: 1fr;          /* Single column layout for better mobile readability */
    --thoughts-grid-gap-mobile: 1rem;             /* 16px reduced spacing for mobile screens */
    --thoughts-grid-padding-mobile: 1rem;         /* 16px reduced padding for mobile screens */
    --thoughts-project-width-mobile: 100%;        /* Full width projects on mobile for maximum content space */

    /* Viewport heights - using dynamic viewport height for better mobile support */
    --viewport-height: 100vh;         /* Standard viewport height */
    --viewport-height-mobile: 100dvh; /* Dynamic viewport height for mobile */

    /* Hero Layout - Desktop */
    --hero-position-desktop: absolute;        /* Positioning method */
    --hero-transform-desktop: translateY(-50%);/* Vertical centering */
    --hero-text-align-desktop: left;        /* Text alignment */
    --hero-margin-desktop: 0 0 0 2rem;        /* Spacing */
    
    /* Hero Layout - Mobile */
    --hero-position-mobile: static;           /* Normal flow */
    --hero-transform-mobile: none;            /* No transform needed */
    --hero-text-align-mobile: left;           /* Left aligned text */
    --hero-margin-mobile: 0;                  /* No margin needed */
}

/*------------------------------------*\
  #LINK STYLES
\*------------------------------------*/


a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: none;
    font-size: var(--font-size-small);
  
}


/*------------------------------------*\
  #TYPOGRAPHY
\*------------------------------------*/

/* Hero text - Main landing text */
.hero-text {  
    text-align: left;
    font-size: var(--font-size-hero-desktop);
    width: var(--hero-width-desktop);
    font-family: var(--font-primary);
    font-weight: 500;
} 

/* Global heading styles */
h2 {
    font-family: var(--font-primary);
    font-size: var(--font-size-h2-desktop);
    font-weight: 400;
    font-style: normal;
    margin: var(--heading-margin-desktop);
}

/* Registered mark and small symbols */
sup {
    font-size: var(--font-size-sup-desktop);  /* Desktop size */
    color: var(--text-color-grey);            /* Using global grey */
    font-family: var(--font-primary);         /* Primary font */
    font-weight: var(--font-weight-sup);      /* Light weight */
    font-style: normal;                       /* Normal style */
    letter-spacing: var(--letter-spacing-sup);/* Subtle spacing */
}

/* Work section title */
.work-title {
    font-size: var(--font-size-hero-desktop);
}

/* Text utilities */
.text-grey {
    color: var(--text-color-grey);
}

/*  Base Styles ----- */

html {
    scroll-behavior: smooth;
}

/* Body Styles */

body {
    font-family: 'neue-haas-grotesk-display', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #fff;
    color: #000;
    font-size: 16px;
    opacity: 1;

}


/* Header Styles */

header {
    /* Positioning */
    position: fixed;               /* Locks header to viewport, doesn't scroll */
    top: 0;                       /* Aligns to top of viewport */
    left: 0;                      /* Extends to left edge */
    right: 0;                     /* Extends to right edge */
    z-index: var(--z-header);     /* Controls stacking order, keeps header above content */
    
    /* Dimensions */
    height: var(--header-height-desktop);    /* Sets fixed height on desktop */
    padding: 0 var(--header-padding-desktop); /* Adds horizontal spacing, 0 vertical */
    
    /* Visual */
    background-color: var(--header-background); /* Sets background color */
    
    /* Layout - Flexbox Properties */
    display: flex;                /* Enables flexible box layout */
    justify-content: space-between; /* Spreads children (logo & nav) to edges */
    align-items: center;          /* Centers children vertically */
}

.logo {
    height: var(--logo-size-desktop);
    display: flex;
    align-items: center;
    transform: translate(
        var(--logo-x-desktop),
        var(--logo-y-desktop)
    );
}

.logo img {
    height: 100%;
    width: auto;
    display: block;
}

/*------------------------------------*\
  #NAVIGATION STYLES - Part of header
\*------------------------------------*/

/* Navigation container - Holds all navigation links */
nav {
    margin: var(--nav-margin-desktop);    /* Controls spacing around navigation menu */
    display: flex;                        /* Enables flexbox for horizontal alignment */
    align-items: center;                  /* Centers items vertically within nav */
}

/* Navigation links - Individual menu items */
nav a {
    /* Text styling */
    font-family: var(--font-primary);     /* Sets the font family for consistency */
    font-size: 1rem;                      /* Sets text size to 16px */
    font-weight: 300;                     /* Makes text slightly thinner than normal */
    font-style: normal;                   /* Ensures text isn't italicized */
    letter-spacing: 0.0618rem;            /* Adds slight spacing between letters */
    
    /* Link appearance */
    text-decoration: none;                /* Removes underline from links */
    color: var(--color-grey);             /* Sets link color to grey */
    
    /* Spacing */
    margin-left: var(--nav-link-spacing-desktop); /* Space between navigation items */
}

/* Navigation hover state - Changes color when mouse is over link */
nav a:hover {
    color: red;                           /* Changes link color to red on hover */
}

/* Container Styles */

.container {
    padding: var(--container-padding-desktop);  /* Adds consistent spacing inside container */
    box-sizing: border-box;                     /* Includes padding in width/height calculations */
    display: grid;                              /* Enables CSS Grid layout system */
    gap: var(--grid-gap-desktop);              /* Sets spacing between grid items */
    grid-template-rows:                         /* Creates three-row layout structure */
        var(--grid-auto-desktop)                /* Header row: sizes to content */
        var(--grid-fluid-desktop)               /* Main content: takes remaining space */
        var(--grid-auto-desktop);               /* Footer row: sizes to content */
}

.hero-container {
    display: grid;                              /* Enables CSS Grid layout system */
    place-content: center start;                /* Centers vertically, aligns left horizontally */
    padding-left: var(--container-padding-large-desktop); /* Larger left padding for emphasis */
    height: var(--hero-height-desktop);         /* Sets height relative to viewport */
    gap: var(--grid-gap-desktop);              /* Consistent grid item spacing */
}

/*------------------------------------*\
  #WORK & THOUGHTS MAIN PAGE STYLES
\*------------------------------------*/

/* Work grid - Main container for project cards layout */
.work-grid {
    display: grid;                             /* Enables CSS Grid layout system */
    
    /* Grid Layout Configuration */
    grid-auto-flow: var(--work-grid-direction-desktop);  /* Controls how items flow: row (horizontal) or column (vertical) */
    grid-template-columns: repeat(
        var(--work-grid-columns-desktop),      /* Number of columns (3 on desktop) */
        1fr                                    /* Each column takes equal width */
    );
    gap: var(--work-grid-gap-desktop);         /* Space between grid items (32px) */
    
    /* Spacing & Padding */
    padding: var(--work-grid-padding-desktop)  /* Top padding (32px) */
            var(--work-grid-padding-desktop)   /* Right padding (32px) */
            var(--work-grid-padding-desktop)   /* Bottom padding (32px) */
            0;                                 /* Left padding removed intentionally */
    
    /* Size Constraints */
    max-width: var(--work-grid-max-width);     /* Limits width to 1400px */
    margin: 0 auto;                            /* Centers grid horizontally */
    min-height: var(--work-grid-min-height);   /* Ensures full viewport height */
}

/* Work title - Sticky first column */
.work-grid article:first-child {
    position: sticky;                          /* Makes element stick while scrolling */
    top: var(--article-sticky-top-desktop);   /* Distance from top when sticky */
    height: fit-content;                      /* Height adjusts to content */
    align-self: start;                        /* Aligns to top of grid cell */
    grid-column: 1;                           /* Places in first column */
    grid-row: 1;                              /* Places in first row */
    padding: var(--article-padding-desktop);  /* Space inside article */
}

/* Projects in second and third columns */
.work-grid article:nth-child(2) {  /* F.AI Assistant */
    grid-column: 2;
    grid-row: 1;
}

.work-grid article:nth-child(3) {  /* Learning Analytics */
    grid-column: 3;
    grid-row: 1;
}

.work-grid article:nth-child(4) {  /* Fluency Platform */
    grid-column: 2;
    grid-row: 2;
}

.work-grid article:nth-child(5) {  /* AI Course */
    grid-column: 3;
    grid-row: 2;
}

.work-grid article:nth-child(6) {  /* Memhack */
    grid-column: 2;
    grid-row: 3;
}

.work-grid article:nth-child(7) {  /* Fluency Talks */
    grid-column: 3;
    grid-row: 3;
}

/* Work Project - Individual project card container */
.work-project {
    text-align: left;                           /* Aligns content to the left */
    padding: var(--project-padding-desktop);    /* Adds inner spacing from variables */
    border: none;                               /* Removes default border */
    max-width: var(--project-max-width-desktop);/* Controls maximum card width */
}

/* Project Link - Main clickable area */
.work-project a {
    text-decoration: none;                     /* Removes underline from links */
    color: var(--project-text-color);          /* Sets default text color */
}

/* Project Link Hover - Mouse over state */
.work-project a:hover {
    color: var(--project-hover-color);         /* Changes text to red on hover */
}

/* Project Heading Hover - Title hover state */
.work-project a:hover h2 {
    text-decoration: none;                     /* Ensures no underline on hover */
    color: var(--project-hover-color);         /* Changes heading to red on hover */
}

/* Project Details - Expandable content container */
.work-project details {
    font-family: var(--font-secondary);        /* Uses serif font for details */
    font-style: normal;                        /* Sets normal (not italic) style */
}

/* Project Details Hover - Mouse over state */
.work-project:hover details {
    text-decoration: none;                     /* Removes any text decoration */
    color: var(--project-hover-color);         /* Changes to red on hover */
}

/* Project Description - Main content text */
.work-project-description {
    font-family: var(--font-secondary);         /* Uses serif font for body text */
    font-size: var(--project-description-size-desktop); /* Sets desktop text size */
    line-height: var(--project-line-height-desktop);    /* Sets desktop line spacing */
    color: var(--project-text-color);           /* Uses consistent text color */
}

/* Project Details Container - Additional information wrapper */
.work-project-details {
    font-family: var(--font-secondary);        /* Uses serif font for details */
    font-style: normal;                        /* Sets normal text style */
}

/* Project Details Summary - Expandable trigger */
.work-project-details summary {
    list-style: none;                          /* Removes default bullet/arrow */
    font-weight: 400;                          /* Sets regular font weight */
    font-style: italic;                        /* Makes text italic */
    line-height: 1.6;                          /* Sets comfortable line height */
    font-family: var(--font-secondary);        /* Uses serif font */
}

/* Project Details Summary Icon - Custom star indicator */
.work-project-details summary::after {
    content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 40 40"%3E%3Cpath d="M20 0L24.0435 8.76083L32.3605 4.09904L30.5859 13.6122L40 14.8295L33.0849 21.4609L40 28.0924L30.5859 29.3097L32.3605 38.8228L24.0435 34.161L20 42.9219L15.9565 34.161L7.63947 38.8228L9.4141 29.3097L0 28.0924L6.91512 21.4609L0 14.8295L9.4141 13.6122L7.63947 4.09904L15.9565 8.76083L20 0Z" fill="%23FF0000"%3E%3C/path%3E%3C/svg%3E');
    margin-left: var(--project-summary-icon-spacing);
    position: relative;
    top: var(--project-summary-icon-offset);
}

/* Article page styles */

/* Fixed position logo at the top */
.article-logo {
    position: fixed;                           /* Stays in view while scrolling */
    top: var(--article-logo-top-desktop);             /* Distance from top (3rem) */
}

/* Main two-column article layout */
.article-grid {
    display: grid;                             /* Enables grid layout */
    grid-template-columns: 1fr 3fr;            /* Sidebar takes 1/4, content 3/4 */
    gap: var(--article-grid-gap-desktop);      /* Space between columns (2rem) */
    margin: var(--article-margin-desktop);     /* Page margins (0.9rem 2rem 2rem) */
    max-width: var(--article-max-width-desktop); /* Content width limit (1400px) */
}

/* Fixed position article summary */
.article-summary {
    font-size: var(--article-summary-size-desktop); /* Text size (1rem) */
    position: fixed;                           /* Stays in view while scrolling */
    margin: var(--article-summary-offset-desktop)      /* Vertical position (-6rem) */
            0 0 
            var(--article-summary-indent-desktop);     /* Left indent (-0.4rem) */
}

/* Main article title */
.article-content-title {
    font-size: var(--article-title-size-desktop); /* Large title (5rem) */
    font-family: var(--font-primary);         /* Primary sans-serif font */
    font-weight: 400;                         /* Regular weight */
    font-style: normal;                       /* Not italic */
    margin: 2rem 0 0;                         /* Space above title */
}

/* Main article content container */
.article-content {
    text-align: left;                         /* Left-aligned text */
    padding: 0;                               /* No padding */
    border: none;                             /* No border */
    max-width: var(--article-content-width-desktop); /* Width limit (70%) */
}

/* Fixed position sidebar (first column) */
.article-grid > *:first-child {
    position: fixed;                          /* Stays in view while scrolling */
    width: calc(var(--article-sidebar-width-desktop) - 2rem); /* Width calculation */
    left: 2rem;                              /* Distance from left */
    top: var(--article-sidebar-top-desktop);         /* Distance from top (12rem) */
}

/* Second column content (main content) */
.article-grid > *:last-child {
    grid-column: 2;
    position: relative;
    width: var(--article-content-width-desktop); /* Controls content width */
}

.article-content-subtitle {
    font-family: var(--font-secondary);        /* Serif font for subtitle */
    font-size: var(--article-text-size-desktop); /* Text size */
    font-weight: 300;                          /* Light weight text */
    color: var(--color-text);          /* Dark gray text */
    line-height: var(--article-line-height-desktop); /* Line spacing */
    padding: var(--article-subtitle-padding-desktop); /* Vertical spacing */
}

.article-content figure {
    margin: 0;                                 /* Removes default margins */
    padding: var(--article-figure-padding-desktop); /* Vertical spacing */
}

.article-content figcaption {
    font-family: var(--font-secondary);        /* Serif font for captions */
    font-style: italic;                        /* Italicized text */
    font-weight: 300;                          /* Light weight text */
    color: var(--article-caption-color);       /* Lighter gray for captions */
    padding: var(--article-caption-padding-desktop); /* Vertical spacing */
}

.article-content img {
    max-width: var(--article-image-width-desktop); /* Allows image overflow */
    height: auto;                              /* Maintains aspect ratio */
}

.article-content p {
    font-family: var(--font-secondary);        /* Serif font for body text */
    font-weight: 300;                          /* Light weight text */
    font-size: var(--article-text-size-desktop); /* Text size */
    color: var(--article-text-color);          /* Dark gray text */
    line-height: var(--article-line-height-desktop); /* Line spacing */
}

ul,
li {
    list-style: none;
    padding: 0;
    margin: var(--article-list-margin-desktop); /* Consistent indentation */
    color: var(--color-grey); /* Using global color variable */
    letter-spacing: 0.05rem;
}

/* Article list specific styles */
.article-list {
    position: fixed;
    top: var(--article-list-top-desktop);     /* Distance from top */
}

.article-list-li-title {
    margin: var(--article-list-title-spacing-desktop); /* Spacing around title */
    font-weight: 500;                         /* Medium weight */
    color: var(--color-accent);               /* Using global accent color */
}



.registered-mark {
    font-size: 1rem;
    color: var(--color-grey);
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 300;
    font-style: normal;
    letter-spacing: 0.05rem;
}



#main-heading {
    font-family: var(--font-primary);          /* Primary sans-serif font */
    font-size: var(--font-size-hero-desktop);  /* Large hero text size */
    line-height: var(--line-height-heading-desktop); /* Desktop line height */
    margin: 0 0 var(--spacing-medium) 0;       /* Bottom spacing only */
    font-weight: var(--font-weight-light);     /* Light weight text */
}

.hero {
    padding: var(--spacing-large) 0;           /* Vertical padding only */
    max-width: var(--hero-width-desktop);      /* Maximum content width */
    margin-left: var(--spacing-medium);        /* Left offset */
    position: var(--hero-position-desktop);
    transform: var(--hero-transform-desktop);
    text-align: var(--hero-text-align-desktop);
    margin: var(--hero-margin-desktop);
    top: 50%;                                 /* Vertical centering */
}


/* Targets elements with both 'work-project' and 'empty' classes */
/* Used for maintaining grid layout with placeholder spaces */
.work-project.empty {
    /* Makes element invisible while preserving its space in layout */
    visibility: hidden;
    /* Prevents any mouse interactions (clicks, hovers) with the element */
    pointer-events: none;
}


/* Specific grid layout for thoughts page */
.thoughts-page .work-grid {
    grid-template-columns: var(--thoughts-grid-columns-desktop);    /* Creates asymmetric two-column layout */
    gap: var(--thoughts-grid-gap-desktop);                         /* Adds consistent spacing between grid items */
    
    /* Container spacing and constraints */
    padding: var(--thoughts-grid-padding-desktop)                  /* Top padding */
            var(--thoughts-grid-padding-desktop)                   /* Right padding */
            var(--thoughts-grid-padding-desktop)                   /* Bottom padding */
            0;                                                     /* No left padding for alignment */
    max-width: var(--thoughts-grid-max-width);                    /* Constrains maximum width */
    margin: 0 auto;                                               /* Centers the grid horizontally */
}

/* Individual project containers within thoughts page */
.thoughts-page .work-project {
    max-width: var(--thoughts-project-width-desktop);             /* Constrains project width for readability */
}


/* Full-viewport pages - Prevents scrolling for immersive experiences */
.thoughts-page,
.about-page {
    /* Fill viewport height and prevent scrolling */
    height: var(--viewport-height);
    overflow: hidden;
    /* Ensure proper stacking context */
    position: relative;
}

/* Containers within full-viewport pages */
.thoughts-page .container,
.about-page .container {
    /* Inherit full height from parent */
    height: inherit;
    /* Enable smooth scrolling on touch devices if needed */
    -webkit-overflow-scrolling: touch;
}

/*------------------------------------*\
  #HEADER COMPONENT
\*------------------------------------*/
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-header);
    height: var(--header-height-desktop);
    padding: 0 var(--header-padding-desktop);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--header-background);
}

.site-header .logo {
    height: var(--logo-size-desktop);
    display: flex;
    align-items: center;
    transform: translate(var(--logo-x-desktop),
            var(--logo-y-desktop));
    transition: all 0.3s ease;
}

.site-header .logo img {
    height: 100%;
    width: auto;
    display: block;
}

.site-header nav {
    display: flex;
    align-items: center;
}

.site-header nav a {
    margin-left: var(--nav-link-spacing-desktop);
    color: var(--color-grey);
    font-family: var(--font-primary);
    text-decoration: none;
    font-weight: 300;
}

/* Offset for fixed header */
main {
    margin-top: var(--header-height-desktop);
}

/*------------------------------------*\
  #HERO COMPONENT
\*------------------------------------*/
.hero {
    position: var(--hero-position-desktop);
    transform: var(--hero-transform-desktop);
    text-align: var(--hero-text-align-desktop);
    margin: var(--hero-margin-desktop);
    width: var(--hero-width-desktop);
}

/*------------------------------------*\
  #WORK GRID COMPONENT
\*------------------------------------*/
.work-grid {
    display: grid;
    grid-template-columns: repeat(var(--work-grid-columns-desktop), 1fr);
    gap: var(--work-grid-gap-desktop);
    padding: var(--work-grid-padding-desktop);
    max-width: var(--work-grid-max-width);
}

.work-project-description {
    font-size: var(--project-description-size-desktop);
    line-height: var(--project-line-height-desktop);
    color: var(--project-text-color);
}

/*------------------------------------*\
  #ARTICLE COMPONENT
\*------------------------------------*/
.article-grid {
    display: grid;
    grid-template-columns: var(--article-grid-columns-desktop);
    gap: var(--article-grid-gap-desktop);
    margin: var(--article-margin-desktop);
    max-width: var(--article-max-width-desktop);
}

.article-content {
    max-width: var(--article-content-width-desktop);
    text-align: left;
}

.article-content-title {
    font-size: var(--article-title-size-desktop);
    font-family: var(--font-primary);
    font-weight: 400;
}

/*------------------------------------*\
  #FOOTER COMPONENT
\*------------------------------------*/
.footer {
    position: fixed;
    bottom: 1rem;
    left: var(--footer-left-desktop);
    padding: var(--footer-padding-desktop);
    background-color: var(--footer-background);
    text-align: left;
}

/*------------------------------------*\
  #UTILITY CLASSES
\*------------------------------------*/
.hidden {
    visibility: hidden;
    pointer-events: none;
}

/* Tablet Breakpoint */
@media (max-width: 1024px) {
    .work-grid {
        grid-template-columns: repeat(var(--work-grid-columns-tablet), 1fr);
        gap: var(--grid-gap-tablet);
    }

    /* Work grid - Two column layout for tablet */
    .work-grid {
        grid-template-columns: repeat(var(--work-grid-columns-tablet), 1fr);
        /* Changes to 2 columns */
        gap: var(--grid-gap-tablet);
        /* Space between grid items */
        padding: var(--work-grid-padding-tablet)
            /* Top/right/bottom padding */
            var(--work-grid-padding-tablet)
            /* Right padding */
            var(--work-grid-padding-tablet)
            /* Bottom padding */
            0;
        /* No left padding */
    }

    /* First article - Reset sticky positioning */
    .work-grid article:first-child {
        position: relative;
        /* Removes fixed positioning */
        top: auto;
        /* Resets top position */
    }
}


/* Mobile Adjustments for index.html - Specific layout needs */
@media (max-width: 767px) {
    /* Main content area layout */
    main {
        /* Enables flexbox for vertical centering */
        display: flex;
        /* Centers content vertically */
        align-items: center;
        /* Aligns content to the left */
        justify-content: flex-start;
        
    }

    /* Hero section adjustments for mobile */
    .hero {
        /* Removes absolute positioning used on desktop */
        position: static;
        /* Removes centering transform from desktop */
        transform: none;
        /* Left aligns text for mobile */
        text-align: left;
        /* Full width on mobile */
        width: 100%;
    }

    /* Main heading mobile typography */
    #main-heading {
        /* Responsive font size with fallback */
        font-size: var(--font-size-h1-mobile, 12vw);
    }

 /* Mobile header components - All fixed to viewport */
 .logo,
 header,
 nav {
     position: fixed;
     /* Stick to viewport */
     background-color: var(--color-background);
     /* White background */
 }

 /* Mobile logo - Top left corner */
 .logo {
     height: var(--logo-size-mobile);
     /* Existing mobile size variable */
     transform: translate(
             /* Position fine-tuning */
             var(--logo-x-mobile),
             /* Existing X offset */
             var(--logo-y-mobile)
             /* Existing Y offset */
         );
     top: var(--spacing-small);
     /* 1rem from top */
     left: var(--spacing-medium);
     /* 2rem from left */
     margin-bottom: var(--spacing-small);
     /* 1rem bottom margin */
 }

 /* Mobile header - Full width container */
 header {
     top: 0;
     /* Align to viewport top */
     width: 100%;
     /* Full viewport width */
     padding: var(--spacing-small);
     /* 2.6rem padding */
     z-index: var(--z-index-header);
     /* Layer ordering */
     flex-direction: column;
     /* Stack children vertically */
     align-items: center;
     /* Center children horizontally */
     height: var(--header-height-mobile);
 }

 /* Mobile navigation - Top right corner */
 nav {
     top: var(--spacing-small);
     /* 1rem from top */
     right: var(--spacing-small);
     /* 2rem from right */
     margin-top: var(--spacing-small);
     /* 1rem top margin */
     text-align: center;
     /* Center nav items */
 }

 /* Content styles */
 .work-grid,
 .article-grid {
     grid-auto-flow: var(--work-grid-direction-mobile);
     /* Changes to vertical flow */
     grid-template-columns: repeat(var(--work-grid-columns-mobile), 1fr);
     gap: var(--work-grid-gap-mobile);
     padding: var(--work-grid-padding-mobile) var(--work-grid-padding-mobile) var(--work-grid-padding-mobile) 0;
     /* Maintains no left padding */
 }

 .hero-text {
     font-size: var(--font-size-hero-mobile);
     /* Smaller size */
     width: var(--hero-width-mobile);
     /* Full width */
     position: absolute;
     top: 44%;
     left: 48%;
     transform: translate(-50%, -50%);
 }

 .footer {
     position: static;
     /* Normal document flow */
     padding: var(--footer-padding-mobile);
     /* Reduced padding */
     margin-top: var(--footer-margin-top-mobile);
     /* Space from content */
     width: 100%;
     /* Full width */
     left: 0;
     /* Reset left position */
 }

 .footer-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    
 }

 .work-title {
     display: none;
 }

 .work-project {
     padding: var(--project-padding-mobile);
     max-width: var(--project-max-width-mobile);
 }

 .article-mobile-order-1 {
     order: 1;
 }

 .article-mobile-order-2 {
     order: 2;
 }

 .article-summary {
     position: relative;
 }

 ul {
     position: relative;
     top: 0;
 }

 .article-content {
     padding: 0;
     max-width: 88%;
 }

 .article-content-title {
     padding: 3rem 0 0;
 }

 .article-content p {
     padding: 0 0 2rem;
 }

 .article-summary {
     display: none;
 }

 .article-grid {
     margin: 0.9rem 1rem 2rem;
 }

 .article-grid>*:first-child {
     position: relative;
     width: 100%;
     left: 0;
 }

 .article-grid>*:last-child {
     grid-column: 1;
     margin-left: 0;
     width: var(--article-content-width-mobile);
     /* Full width content */
 }


 /* Container: add some padding */
 .container {
     padding: var(--container-padding-mobile);
     gap: var(--grid-gap-mobile);
     /* Reduced spacing for mobile */
     grid-template-rows:
         /* Adjusted row structure for mobile */
         var(--grid-auto-mobile)
         /* Header: minimum needed height */
         var(--grid-fluid-mobile)
         /* Content: flexible with overflow protection */
         var(--grid-auto-mobile);
     /* Footer: minimum needed height */
 }

 /* Hero Section: center text and adjust spacing */
 .hero {
     text-align: center;
     margin: var(--spacing-small);
     position: static;
     /* Remove absolute centering behavior on mobile */
     transform: none;
     top: auto;
 }

 /* Main heading: reduce font size for better fit */
 #main-heading {
     font-size: var(--font-size-hero-mobile);
     /* Smaller text for mobile */
     line-height: var(--line-height-heading-mobile);
     /* Adjusted line height */
     margin: 0 0 var(--spacing-small) 0;
     /* Reduced bottom spacing */
 }

 /* Work title adjustments for mobile */
 .work-grid article:first-child {
     position: relative;
     /* Removes sticky behavior on mobile */
     top: 0;
     /* Resets top position */
     padding: var(--article-padding-mobile);
     /* Reduced padding for mobile */
     grid-column: 1;
     /* Full width on mobile */
     grid-row: 1;
     /* Stays at top */
 }

 /* Projects stack in single column on mobile */
 .work-grid article:nth-child(2),
 .work-grid article:nth-child(3),
 .work-grid article:nth-child(4),
 .work-grid article:nth-child(5),
 .work-grid article:nth-child(6),
 .work-grid article:nth-child(7) {
     grid-column: 1;
     /* All articles take full width */
     grid-row: auto;
     /* Automatic row placement */
 }

 .work-project-description {
     font-size: var(--project-description-size-mobile);
     line-height: var(--project-line-height-mobile);
 }

 /* Logo adjustments */
 .article-logo {
     top: var(--article-logo-top-mobile);
     /* Adjusted top position */
     position: relative;
     /* In normal flow on mobile */
 }

 /* Grid adjustments */
 .article-grid {
     grid-template-columns: 1fr;
     /* Single column layout */
     gap: var(--article-grid-gap-mobile);
     /* Reduced spacing */
     margin: var(--article-margin-mobile);
     /* Smaller margins */
 }

 /* Content adjustments */
 .article-content {
     max-width: var(--article-content-width-mobile);
     /* Full width content */
 }

 /* Title adjustments */
 .article-content-title {
     font-size: var(--article-title-size-mobile);
     /* Smaller title */
     margin: var(--article-summary-offset-mobile) 0 0;
     /* Adjusted spacing */
 }

 /* Summary adjustments */
 .article-summary {
     font-size: var(--article-summary-size-mobile);
     /* Smaller text */
     position: relative;
     /* In normal flow */
     margin: var(--article-summary-offset-mobile) 0 0 var(--article-summary-indent-mobile);
     /* Mobile spacing */
 }

 /* Sidebar adjustments */
 .article-grid>*:first-child {
     position: relative;
     /* In normal flow */
     width: var(--article-content-width-mobile);
     /* Full width */
     left: 0;
     /* Reset position */
     top: var(--article-sidebar-top-mobile);
     /* Reset position */
 }

 /* Main content container adjustments */
 .article-grid>*:last-child {
     grid-column: 1;
     /* Single column layout */
     width: var(--article-content-width-mobile);
     /* Full width content */
 }

 /* Subtitle adjustments */
 .article-content-subtitle {
     font-size: var(--article-text-size-mobile);
     /* Smaller text */
     line-height: var(--article-line-height-mobile);
     /* Tighter spacing */
     padding: var(--article-subtitle-padding-mobile);
     /* Reduced padding */
 }

 /* Figure adjustments */
 .article-content figure {
     padding: var(--article-figure-padding-mobile);
     /* Reduced spacing */
 }

 /* Caption adjustments */
 .article-content figcaption {
     padding: var(--article-caption-padding-mobile);
     /* Reduced spacing */
 }

 /* Image adjustments */
 .article-content img {
     max-width: var(--article-image-width-mobile);
     /* Contained images */
 }

 /* Paragraph adjustments */
 .article-content p {
     font-size: var(--article-text-size-mobile);
     /* Smaller text */
     line-height: var(--article-line-height-mobile);
     /* Tighter spacing */
 }

 /* Reset list styles for mobile */
 ul,
 li {
     margin: var(--article-list-margin-mobile);
     /* Remove indent */
 }

 /* Article list mobile adjustments */
 .article-list {
     position: relative;
     /* In normal flow */
     top: var(--article-list-top-mobile);
     /* Reset position */
     margin-bottom: 2rem;
     /* Space after list */
 }

 /* Title adjustments for mobile */
 .article-list-li-title {
     margin: var(--article-list-title-spacing-mobile);
     /* Reduced spacing */
     font-size: var(--article-list-font-size-mobile);
     /* Smaller text */
 }

 /* Superscript mobile adjustments */
 sup {
     font-size: var(--font-size-sup-mobile);
     /* Smaller on mobile */
 }

  /* Mobile grid layout adjustments */
    .thoughts-page .work-grid {
        grid-template-columns: var(--thoughts-grid-columns-mobile);/* Switches to single column */
        gap: var(--thoughts-grid-gap-mobile);                     /* Reduces spacing between items */
        padding: var(--thoughts-grid-padding-mobile);             /* Reduces padding around container */
    }

    /* Mobile project container adjustments */
    .thoughts-page .work-project {
        max-width: var(--thoughts-project-width-mobile);          /* Full width for better mobile viewing */
    }

  .thoughts-page,
  .about-page {
      /* Use dynamic viewport height for better mobile experience */
      height: auto;
      /* Change from fixed height to minimum height on mobile */
      min-height: var(--viewport-height-mobile);
      /* Enable scrolling when content overflows */
      overflow: auto;
  }

  /* Keep container scrollable for touch devices */
  .thoughts-page .container {
      height: auto;
      min-height: var(--viewport-height-mobile);
      overflow: auto;
      -webkit-overflow-scrolling: touch;
  }

    .site-header {
        height: var(--header-height-mobile);
        padding: 0 var(--header-padding-mobile);
    }

    .site-header .logo {
        height: var(--logo-size-mobile);
        transform: translate(
            var(--logo-x-mobile),
            var(--logo-y-mobile)
        );
    }

    .site-header nav {
        margin: var(--nav-margin-mobile);
    }

    /* Hero Section */
    .hero {
        position: var(--hero-position-mobile);
        transform: var(--hero-transform-mobile);
        text-align: var(--hero-text-align-mobile);
        width: var(--hero-width-mobile);
    }

    /* Work Grid */
    .work-grid {
        grid-template-columns: repeat(var(--work-grid-columns-mobile), 1fr);
        gap: var(--work-grid-gap-mobile);
        padding: var(--work-grid-padding-mobile);
    }

    /* Article Layout */
    .article-grid {
        grid-template-columns: 1fr;
        gap: var(--article-grid-gap-mobile);
        margin: var(--article-margin-mobile);
    }

    .article-content {
        max-width: var(--article-content-width-mobile);
    }

    .thoughts-page {
        height: auto;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Main content area layout */
    main {
        /* Enables flexbox for vertical centering */
        display: flex;
        /* Centers content vertically */
        align-items: center;
        /* Aligns content to the left */
        justify-content: flex-start;
        
    }
}