/* ============================================
   Font Face Declarations
   ============================================ */

@font-face {
    font-family: 'Neue Montreal';
    src: url('/assets/fonts/NeueMontreal-Regular.woff2') format('woff2'),
         url('/assets/fonts/NeueMontreal-Regular.woff') format('woff'),
         url('/assets/fonts/NeueMontreal-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neue Montreal';
    src: url('/assets/fonts/NeueMontreal-Bold.woff2') format('woff2'),
         url('/assets/fonts/NeueMontreal-Bold.woff') format('woff'),
         url('/assets/fonts/NeueMontreal-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ============================================
   CSS Variables & Reset
   ============================================ */

:root {
    /* ============================================
       Color System
       ============================================ */
    
    /* Green */
    --color-green-default: #61BB46;
    --color-green-dark: #4C9736;
    --color-green-light: #7CC766;
    --color-green-lightest: #F2FAEB;
    
    /* Yellow */
    --color-yellow-default: #FDB827;
    --color-yellow-dark: #F2A602;
    --color-yellow-light: #FDCB5D;
    --color-yellow-lightest: #FFF9EA;
    
    /* Orange */
    --color-orange-default: #F5821F;
    --color-orange-dark: #E06800;
    --color-orange-light: #F79E50;
    --color-orange-lightest: #F8EDE1;
    
    /* Red */
    --color-red-default: #E03A3E;
    --color-red-dark: #D42124;
    --color-red-light: #E66062;
    --color-red-lightest: #F7EDED;
    
    /* Purple */
    --color-purple-default: #963D97;
    --color-purple-dark: #813582;
    --color-purple-light: #B651B8;
    --color-purple-lightest: #F6F1F6;
    
    /* Blue */
    --color-blue-default: #009DDC;
    --color-blue-dark: #0084B8;
    --color-blue-light: #0ABAFF;
    --color-blue-lightest: #E2F4FB;
    
    /* Grey */
    --color-grey-5: #2A2A2A;
    --color-grey-4: #666666;
    --color-grey-3: #ADADAD;
    --color-grey-2: #E9E9E9;
    --color-grey-1: #FAFAFA;
    
    /* White */
    --color-white: #FFFFFF;
    
    /* ============================================
       Semantic Color Mappings
       ============================================ */
    
    /* Backgrounds */
    --color-projects-bg: var(--color-grey-1);

    /* Text Colors */
    --color-text-dark: var(--color-grey-5);
    --color-text-light: var(--color-grey-1);

    /* Hero Dynamic Colors - Set via JavaScript, defaults to monochrome */
    --hero-text-color: var(--color-grey-5);
    --hero-bg-color: var(--color-grey-1);

    /* About Dynamic Colors - Set via JavaScript, defaults to monochrome */
    --about-text-color: var(--color-grey-5);
    --about-bg-color: var(--color-grey-1);

    /* Footer Dynamic Colors - Set via JavaScript, defaults to monochrome */
    --footer-text-color: var(--color-grey-5);
    --footer-bg-color: var(--color-grey-1);
    
    /* Typography */
    --font-family: 'Neue Montreal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    /* Baseline for typography calculations */
    --baseline: 8;
    
    /* Typography Base Sizes (unitless) - From Figma */
    --t-hero-heading-size: 58;
    --t-hero-heading-line-height: 63.8; /* 110% line height = 63.8px (58 * 1.1) */
    --t-hero-heading-letter-spacing: -1.16;
    
    --t-section-heading-size: 40;
    --t-section-heading-line-height: 44; /* From Figma: 40px font, 44px line height */
    --t-section-heading-letter-spacing: -0.8;
    
    /* Heading Typography - From Figma */
    --t-h1-size: 56; /* 3.5rem = 56px */
    --t-h1-line-height: 56; /* From Figma: 56px line height */
    --t-h1-letter-spacing: -1.12;
    
    --t-h2-size: 48; /* 3rem = 48px */
    --t-h2-line-height: 52.8; /* From Figma: 1.1 x font size = 52.8px */
    --t-h2-letter-spacing: -0.96;
    
    /* H3 uses --t-section-heading-* variables (40px / 44px) - accurate, keep as is */
    
    --t-h4-size: 32; /* 2rem = 32px */
    --t-h4-line-height: 35.2; /* From Figma: 1.1 x font size = 35.2px */
    --t-h4-letter-spacing: -0.64;
    
    --t-h5-size: 24; /* 1.5rem = 24px */
    --t-h5-line-height: 26.4; /* From Figma: 1.1 x font size = 26.4px */
    --t-h5-letter-spacing: -0.48;
    
    --t-h6-size: 20; /* 1.25rem = 20px */
    --t-h6-line-height: 22; /* From Figma: 1.1 x font size = 22px */
    --t-h6-letter-spacing: -0.4;
    
    --t-hero-text-size: 21;
    --t-hero-text-line-height: 36.75; /* From Figma: 21px font, 36.75px line height */
    --t-hero-text-letter-spacing: 0;
    
    --t-project-title-size: 21;
    --t-project-title-line-height: 36.75; /* From Figma: 21px font, 36.75px line height */
    --t-project-title-letter-spacing: 0;
    
    --t-skills-title-size: 20;
    --t-skills-title-line-height: 22; /* From Figma: 20px font, 22px line height */
    --t-skills-title-letter-spacing: 2;
    
    --t-skills-list-size: 21;
    --t-skills-list-line-height: 36.75; /* From Figma: 21px font, 36.75px line height */
    --t-skills-list-letter-spacing: 0;
    
    /* Footer uses --t-section-heading-* and --t-hero-text-* variables (body-text class) */
    
    --t-chip-button-size: 21;
    --t-chip-button-line-height: 36.75; /* From Figma: 21px font, 36.75px line height */
    --t-chip-button-letter-spacing: 0.42;
    
    /* Line Height Multipliers (unitless) - for zoom support */
    --t-hero-heading-line-height-multiplier: 1.1; /* 63.8 / 58 */
    --t-section-heading-line-height-multiplier: 1.1; /* 44 / 40 */
    --t-h1-line-height-multiplier: 1.0; /* 56 / 56 */
    --t-h2-line-height-multiplier: 1.1; /* 52.8 / 48 */
    --t-h4-line-height-multiplier: 1.1; /* 35.2 / 32 */
    --t-h5-line-height-multiplier: 1.1; /* 26.4 / 24 */
    --t-h6-line-height-multiplier: 1.1; /* 22 / 20 */
    --t-hero-text-line-height-multiplier: 1.75; /* 36.75 / 21 */
    --t-project-title-line-height-multiplier: 1.75; /* 36.75 / 21 */
    --t-skills-title-line-height-multiplier: 1.1; /* 22 / 20 */
    --t-skills-list-line-height-multiplier: 1.75; /* 36.75 / 21 */
    --t-chip-button-line-height-multiplier: 1.75; /* 36.75 / 21 */
    
    /* Spacing Base Values (unitless) */
    --space-8-unitless: calc(var(--baseline) * 1); /* 8px */
    --space-12-unitless: calc(var(--baseline) * 1.5); /* 12px */
    --space-16-unitless: calc(var(--baseline) * 2); /* 16px */
    --space-20-unitless: calc(var(--baseline) * 2.5); /* 20px */
    --space-24-unitless: calc(var(--baseline) * 3); /* 24px */
    --space-32-unitless: calc(var(--baseline) * 4); /* 32px */
    --space-40-unitless: calc(var(--baseline) * 5); /* 40px */
    --space-48-unitless: calc(var(--baseline) * 6); /* 48px */
    --space-56-unitless: calc(var(--baseline) * 7); /* 56px */
    --space-64-unitless: calc(var(--baseline) * 8); /* 64px */
    --space-72-unitless: calc(var(--baseline) * 9); /* 72px */
    --space-80-unitless: calc(var(--baseline) * 10); /* 80px */
    --space-96-unitless: calc(var(--baseline) * 12); /* 96px */
    --space-120-unitless: calc(var(--baseline) * 15); /* 120px */
    --space-128-unitless: calc(var(--baseline) * 16); /* 128px */
    --space-136-unitless: calc(var(--baseline) * 17); /* 136px (closest 8px multiple to 138.24px) */
    --space-144-unitless: calc(var(--baseline) * 18); /* 144px */
    
    /* Spacing with viewport scaling using --t-divisor */
    --space-8: calc((var(--space-8-unitless) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    --space-12: calc((var(--space-12-unitless) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    --space-16: calc((var(--space-16-unitless) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    --space-20: calc((var(--space-20-unitless) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    --space-24: calc((var(--space-24-unitless) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    --space-32: calc((var(--space-32-unitless) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    --space-40: calc((var(--space-40-unitless) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    --space-48: calc((var(--space-48-unitless) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    --space-56: calc((var(--space-56-unitless) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    --space-64: calc((var(--space-64-unitless) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    --space-72: calc((var(--space-72-unitless) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    --space-80: calc((var(--space-80-unitless) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    --space-96: calc((var(--space-96-unitless) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    --space-120: calc((var(--space-120-unitless) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    --space-128: calc((var(--space-128-unitless) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    --space-136: calc((var(--space-136-unitless) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    --space-144: calc((var(--space-144-unitless) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    
    /* Spacing Variables - Mobile: Compact */
    --spacing-section-padding: var(--space-32); /* Mobile: 32px - perfect */
    --spacing-section-gap: var(--space-24); /* Mobile: 24px - 8px less than padding */
    --spacing-card-gap: var(--space-32); /* Mobile: 32px */
    --spacing-content-gap: var(--space-24);
    
    /* Layout */
    --grid-cols: 3; /* Default: 3 columns */
    --card-base-width: 441; /* Base card width in pixels (unitless) */
    --content-grid-col-width-unitless: 48; /* Grid column width for process diagram (unitless) */
    --content-grid-col-width: calc((var(--content-grid-col-width-unitless) / var(--t-divisor)) * min(100vw, var(--max-viewport))); /* Grid column width for process diagram */
    
    /* Typography & Scaling Divisor - Base: 640px */
    --t-divisor: 640;
    
    /* Max viewport width - scaling stops at this size */
    --max-viewport: 1728px;
    
    /* Card width scaling */
    --card-base-width-vw: calc((var(--card-base-width) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    --max-card-width: var(--card-base-width-vw);
    --project-card-width: var(--max-card-width);
    --project-card-scale: 1;
    --project-card-gap: var(--spacing-card-gap);
    --max-content-width: calc((var(--max-card-width) * 3) + (var(--spacing-card-gap) * 2)); /* 3 cards + 2 gaps */
    --hero-content-width: calc((var(--max-card-width) * 2) + var(--spacing-card-gap)); /* 2 cards + 1 gap */
    
    /* Border Width & Radius - Base values (unitless) for 1440px breakpoint */
    /* Adjusted for --t-divisor: 1728 at 1440px: value * 1728 / 1440 = target_px */
    --border-width-unitless: 1.2; /* 1px at 1440px (1 * 1728 / 1440) */
    --border-radius-unitless: 31.704; /* 26.42px at 1440px (26.42 * 1728 / 1440) */
    
    /* Border Width - Scales with viewport */
    --border-width: calc((var(--border-width-unitless) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    
    /* Border Radius - Scales with viewport */
    --border-radius-large: calc((var(--border-radius-unitless) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    --border-radius-medium: calc((var(--border-radius-unitless) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    --border-radius-small: calc((var(--border-radius-unitless) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    line-height: 1.75;
    color: var(--color-text-dark);
    overflow-x: visible;
}

body.homepage {
    opacity: 0;
    transition: opacity 0.1Is ease-in;
}

body.homepage.loaded {
    opacity: 1;
}

html {
    font-size: 16px; /* Root font size: 1rem = 16px */
    overflow-x: visible;
    scroll-behavior: smooth;
}

/* ============================================
   Viewport-Based Scaling Breakpoints
   ============================================ */

/* Root font size: 16px (1rem = 16px)
   Breakpoint conversions:
   - 40rem = 640px
   - 64rem = 1024px
   - 90rem = 1440px
   - 120rem = 1920px
*/

/* Base: 390px (mobile-first) - already defined above */

/* Breakpoint: 640px (40rem) */
@media (min-width: 40rem) {
    :root {
        /* Update divisor for scaling */
        --t-divisor: 1024;
        
        /* Incremental spacing increase */
        --spacing-section-padding: var(--space-48); /* 48px */
        --spacing-section-gap: var(--space-40); /* 40px - 8px less than padding */
        
        /* Grid columns: 2 columns at this breakpoint */
        --grid-cols: 2;
    }
}

/* Mobile: < 640px - 1 column */
@media (max-width: 39.9375rem) {
    :root {
        --grid-cols: 1;
        /* Lower divisor = larger fonts on mobile */
        --t-divisor: 480;
        /* Reduce h1 base size for mobile - scaling is good, but root size is too big */
        --t-h1-size: 32;
        --t-h1-letter-spacing: -0.64; /* Maintain -2% of font size ratio */
        /* Reduce hero heading size for mobile (used in .heading-large and .note-header h1) */
        --t-hero-heading-size: 32;
        --t-hero-heading-letter-spacing: -0.64; /* Maintain -2% of font size ratio */
        /* Reduce h2 size for mobile - maintaining same ratio as h1 reduction */
        --t-h2-size: 28;
        --t-h2-letter-spacing: -0.56; /* Maintain -2% of font size ratio */
        /* Reduce h3 (section-heading) size for mobile - maintaining same ratio as h1 reduction */
        --t-section-heading-size: 24;
        --t-section-heading-letter-spacing: -0.48; /* Maintain -2% of font size ratio */
        /* Reduce h4 size for mobile - same as body text, bold weight creates distinction */
        --t-h4-size: 21;
        --t-h4-letter-spacing: -0.42; /* Maintain -2% of font size ratio */
        /* Reduce h5 size for mobile - between body and caption */
        --t-h5-size: 19;
        --t-h5-letter-spacing: -0.38; /* Maintain -2% of font size ratio */
        /* Reduce h6 size for mobile - same as caption, bold weight creates distinction */
        --t-h6-size: 18;
        --t-h6-letter-spacing: -0.36; /* Maintain -2% of font size ratio */
    }
}

/* Breakpoint: 1024px (64rem) */
@media (min-width: 64rem) {
    :root {
        /* Update divisor for scaling */
        --t-divisor: 1440;
        
        /* Incremental spacing increase */
        --spacing-section-padding: var(--space-80); /* 80px */
        --spacing-section-gap: var(--space-72); /* 72px - 8px less than padding */
        
        /* Grid columns: 3 columns at this breakpoint */
        --grid-cols: 3;
                
        /* Update typography sizes - keep body text at 21px from Figma */
        --t-hero-heading-size: 58;
        --t-section-heading-size: 40;
        --t-hero-text-size: 21;
        --t-project-title-size: 21;
        --t-skills-title-size: 20;
        --t-skills-list-size: 21;
        /* Footer uses section-heading and body-text variables */
    }
}

/* Breakpoint: 1440px (90rem) */
@media (min-width: 90rem) {
    :root {
        /* Update divisor for scaling - use 1728 for >=1440px */
        --t-divisor: 1728;
        
        /* Spacing Variables - Large Desktop: Spacious */
        --spacing-section-padding: var(--space-144); /* 144px */
        --spacing-section-gap: var(--space-136); /* 136px - 8px less than padding */
        --spacing-card-gap: var(--space-64); /* 64px */
        
        /* Update typography sizes - Large Desktop */
        --t-hero-heading-size: 58;
        --t-hero-heading-line-height: 63.8; /* 110% line height = 63.8px (58 * 1.1) */
        --t-section-heading-size: 40;
        --t-hero-text-size: 21;
        --t-project-title-size: 21;
        --t-skills-title-size: 20;
        --t-skills-list-size: 21;
        /* Footer uses section-heading and body-text variables */
    }
}

/* ============================================
   Typography
   ============================================ */

.heading-large {
    font-size: calc((var(--t-hero-heading-size) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    font-weight: 400;
    line-height: var(--t-hero-heading-line-height-multiplier);
    letter-spacing: calc((var(--t-hero-heading-letter-spacing) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    color: var(--hero-text-color);
}

.section-heading {
    font-size: calc((var(--t-section-heading-size) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    font-weight: 400;
    line-height: var(--t-section-heading-line-height-multiplier);
    letter-spacing: calc((var(--t-section-heading-letter-spacing) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    color: var(--color-text-dark);
}

.section-heading-red {
    color: var(--about-text-color);
}

/* Footer uses light text color */
.footer .section-heading,
.footer .body-text {
    color: var(--footer-text-color);
}

.body-text {
    font-size: calc((var(--t-hero-text-size) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    line-height: var(--t-hero-text-line-height-multiplier);
    letter-spacing: calc((var(--t-hero-text-letter-spacing) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    color: var(--hero-text-color);
}

.body-text p {
    margin-bottom: calc((22.4 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
}

.body-text p:last-child {
    margin-bottom: 0;
}

.project-title,
.project-meta {
    font-size: calc((var(--t-project-title-size) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    line-height: var(--t-project-title-line-height-multiplier);
    letter-spacing: calc((var(--t-project-title-letter-spacing) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    color: var(--color-text-dark);
}

.project-meta {
    white-space: nowrap;
}

.project-card:hover:not([data-display-only]) .project-meta {
    color: var(--color-white);
}

.skills-title {
    font-size: calc((var(--t-skills-title-size) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    font-weight: 700;
    line-height: var(--t-skills-title-line-height-multiplier);
    letter-spacing: calc((var(--t-skills-title-letter-spacing) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    text-transform: uppercase;
}

.skills-list {
    list-style: none;
    font-size: calc((var(--t-skills-list-size) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    line-height: var(--t-skills-list-line-height-multiplier);
    letter-spacing: calc((var(--t-skills-list-letter-spacing) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    color: var(--about-text-color);
}

.skills-list li {
    padding: var(--space-12) 0;
    border-bottom: var(--border-width) solid var(--about-text-color);
}

.skills-list li:last-child {
    border-bottom: none;
}

/* Footer uses .section-heading and .body-text classes - no separate typography classes needed */

.footer-link {
    color: var(--footer-text-color);
    text-decoration: underline;
    background-color: transparent;
    padding: 0.1em 0.2em;
    margin: 0 -0.2em;
}

.footer-link:hover {
    background-color: var(--footer-text-color);
    color: var(--footer-bg-color);
}

/* ============================================
   Hero Section
   ============================================ */

.hero {
    background-color: var(--hero-bg-color);
    padding: var(--spacing-section-padding);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-section-gap);
    position: relative;
}

.section-content-wrapper {
    max-width: min(100%, var(--max-content-width));
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-section-gap);
}

.hero .section-content-wrapper {
    max-width: var(--max-content-width);
}

.heading-large {
    width: 100%;
}

.hero-content {
    display: grid;
    grid-template-columns: calc((242 / var(--t-divisor)) * min(100vw, var(--max-viewport))) 1fr;
    grid-template-rows: auto auto;
    column-gap: calc((64 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    row-gap: var(--spacing-content-gap);
    max-width: var(--hero-content-width);
    width: 100%;
    margin-left: 0;
    margin-right: auto;
}

.hero-image-wrapper {
    grid-row: 1;
    grid-column: 1;
    align-self: start;
    position: relative;
    border: var(--border-width) solid var(--hero-text-color);
    border-radius: var(--border-radius-large);
    overflow: hidden;
}

/* Dot pattern background */
.hero-image-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, var(--hero-text-color) calc((2 / var(--t-divisor)) * min(100vw, var(--max-viewport))), transparent calc((2 / var(--t-divisor)) * min(100vw, var(--max-viewport))));
    background-size: calc((16 / var(--t-divisor)) * min(100vw, var(--max-viewport))) calc((16 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    background-position: 0 0;
    opacity: 0.3;
    z-index: 0;
}

.hero-image {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 1;
}

.body-text {
    grid-row: 1;
    grid-column: 2;
    align-self: start;
}

.hero-buttons {
    grid-row: 2;
    grid-column: 2;
    display: flex;
    gap: var(--space-16);
    flex-wrap: wrap;
    align-items: flex-start;
}

.chip-button {
    padding: calc((9 / var(--t-divisor)) * min(100vw, var(--max-viewport))) calc((25 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    height: calc((47 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    border: var(--border-width) solid var(--hero-text-color);
    border-radius: calc((8 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    background: transparent;
    color: var(--hero-text-color);
    font-size: calc((var(--t-chip-button-size) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    line-height: var(--t-chip-button-line-height-multiplier);
    letter-spacing: calc((var(--t-chip-button-letter-spacing) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    font-family: var(--font-family);
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.chip-button:hover {
    background-color: var(--hero-text-color);
    color: var(--hero-bg-color);
}

.chip-button-open-to-work {
    gap: calc((16 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    padding-right: calc((20 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    border: none;
    cursor: default;
}

/* Mobile: Full-width capsule buttons */
@media (max-width: 39.9375rem) {
    .chip-button {
        width: 100%;
        padding: calc((32 / var(--t-divisor)) * min(100vw, var(--max-viewport))) calc((24 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
        border-radius: 999px; /* Fully rounded capsule */
        display: flex;
    }

    .hero-buttons {
        flex-direction: column;
        gap: calc((16 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    }
}

.chip-button-open-to-work:hover {
    background-color: transparent;
    color: var(--hero-text-color);
}

.chip-button-resume {
    display: none;
}

.pulse-indicator {
    width: calc((18 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    height: calc((18 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    background-color: var(--color-green-default);
    border-radius: 50%;
    display: inline-block;
    animation: pulse-animation 2s infinite;
    flex-shrink: 0;
    box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1);
}

@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0 rgba(97, 187, 70, 0.4);
    }
    100% {
        box-shadow: 0 0 0 calc((10 / var(--t-divisor)) * min(100vw, var(--max-viewport))) rgba(97, 187, 70, 0);
    }
}

/* ============================================
   Hero Scroll Indicator
   ============================================ */

.hero-scroll-indicator {
    position: absolute;
    bottom: calc(var(--spacing-section-padding) * -0.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc((2 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    height: var(--spacing-section-padding);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    color: var(--hero-text-color);
    pointer-events: none;
    z-index: 1;
}

.scroll-line {
    width: 100%;
    height: 100%;
    border-left: var(--border-width) solid currentColor;
    animation: scroll-draw 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes scroll-draw {
    0% {
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); /* Starts from top - line hidden (top and bottom at 0%) */
    }
    50% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); /* Full length - fully drawn from top to bottom */
    }
    100% {
        clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); /* Shrinks from top - top moves down to bottom, bottom stays fixed */
    }
}

/* ============================================
   Projects Section
   ============================================ */

.projects {
    background-color: var(--color-projects-bg);
    padding: var(--spacing-section-padding);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-section-gap);
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
    gap: var(--spacing-card-gap);
    width: 100%;
    align-items: start;
    justify-content: start;
}

/* Grid will automatically adjust based on card max-width and available space */

.project-card {
    background-color: transparent;
    border: var(--border-width) solid var(--color-text-dark);
    border-radius: var(--border-radius-large);
    padding: var(--space-32);
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    cursor: pointer;
    /* Performance optimization: isolate rendering to prevent layout thrashing */
    contain: layout style paint;
}

.project-card:hover:not([data-display-only]) {
    background-color: var(--project-color-default);
    border-color: var(--color-white);
}

.project-card-large {
    aspect-ratio: 4 / 5;
}

.project-card-small {
    /* No aspect-ratio - flex: 1 makes each card take half the group height minus half the gap */
    flex: 1;
}

/* Full-width cards - target both the card and its wrapper */
.project-card-full-width {
    aspect-ratio: 1139 / 211; /* Match height of small cards group at desktop */
}

/* Tablet: Adjust aspect ratio to match 2-column small cards */
@media (min-width: 40rem) and (max-width: 63.9375rem) {
    .project-card-full-width {
        aspect-ratio: 927 / 264;
    }
}

/* Mobile: Adjust aspect ratio */
@media (max-width: 39.9375rem) {
    .project-card-full-width {
        aspect-ratio: 497 / 292;
    }
}

/* Target the link/wrapper containing a full-width card */
.projects-grid > a:has(.project-card-full-width),
.projects-grid > .project-card-full-width {
    grid-column: 1 / -1; /* Span all columns */
}

.project-cards-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-card-gap);
    width: 100%;
    aspect-ratio: 4 / 5; /* Same as large cards */
}

/* When there's only one small card in a group, it should maintain a smaller size */
.project-cards-group:has(.project-card-small:only-child) {
    aspect-ratio: auto;
    height: auto;
}

.project-cards-group:has(.project-card-small:only-child) .project-card-small {
    flex: 0 1 auto;
    min-height: 0;
}

.project-graphic {
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: var(--project-color-light);
    flex-shrink: 0;
    border: var(--border-width) solid var(--color-text-dark);
    border-radius: calc(var(--border-radius-large) * 0.5);
    opacity: 0;
}

/* Display-only cards - always show graphic */
.project-card[data-display-only] .project-graphic {
    opacity: 1;
}

/* Reveal graphic on first hover/scroll */
.project-card.graphic-revealed .project-graphic {
    opacity: 1;
}

/* Touch devices: Always show graphic wrapper (no fade-in behavior) */
@media (hover: none) and (pointer: coarse) {
    .project-graphic {
        opacity: 1;
    }
}

/* Change graphic border to white on hover */
.project-card:hover:not([data-display-only]) .project-graphic {
    border-color: var(--color-white);
}

/* Change graphic background to grey-4 on hover for cards without color */
.project-card:not([data-color]):hover:not([data-display-only]) .project-graphic {
    background-color: var(--color-grey-4);
}

.project-card:hover:not([data-display-only]) .project-graphic svg [stroke] {
    stroke: var(--color-white) !important;
}

/* Change fills to white on hover for cards with data-fills-as-strokes (fills behave like strokes) */
.project-card[data-fills-as-strokes]:hover:not([data-display-only]) .project-graphic svg [fill][data-fill-as-stroke="true"] {
    fill: var(--color-white) !important;
}

.project-graphic > * {
    width: 100%;
    display: block;
}

.project-graphic svg {
    width: 100%;
    aspect-ratio: 378 / 213;
    display: block;
    /* Performance optimization: hint browser about upcoming animations */
    will-change: contents;
}

.project-graphic canvas {
    width: 100%;
    aspect-ratio: 378 / 213;
    display: block;
}

.project-graphic img {
    width: 100%;
    aspect-ratio: 378 / 213;
    object-fit: cover;
    display: block;
    opacity: 0;
}

/* Display-only cards - always show image */
.project-card[data-display-only] .project-graphic img {
    opacity: 1;
}

/* Slower fade on mobile for scroll-triggered reveal - removed transition */

/* Fade in image on hover - class persists after hover ends */
.project-card:hover:not([data-display-only]) .project-graphic img,
.project-card.image-revealed .project-graphic img {
    opacity: 1;
}

/* SVG stroke and fill transitions removed */

/* Change background fill from grey-2 to grey-4 on hover for cards without data-color */
/* Uses data-background-fill attribute set by JavaScript for reliable targeting */
.project-card:not([data-color]):hover:not([data-display-only]) .project-graphic svg [fill][data-background-fill="true"] {
    fill: var(--color-grey-4) !important;
}

.project-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    gap: calc((16 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    min-width: 0;
    min-height: 0; /* Allow flex item to shrink below content size if needed */
}

.project-title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Allow 4 lines on mobile */
    line-clamp: 4;
    -webkit-box-orient: vertical;
}

@media (min-width: 64rem) {
    .project-title {
        -webkit-line-clamp: 3; /* 3 lines on desktop */
        line-clamp: 3;
    }
}

.project-card:hover:not([data-display-only]) .project-title {
    color: var(--color-white);
}

.project-badges {
    display: flex;
    flex-wrap: wrap;
    gap: calc((8 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    align-items: flex-start;
}

.project-badge {
    border: var(--border-width) solid var(--color-text-dark);
    border-radius: calc((32 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    padding: 0 calc((16 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    font-size: calc((var(--t-project-title-size) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    line-height: var(--t-project-title-line-height-multiplier);
    letter-spacing: calc((var(--t-project-title-letter-spacing) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    color: var(--color-text-dark);
    white-space: nowrap;
    flex-shrink: 0;
}

.project-card:hover:not([data-display-only]) .project-badge {
    border-color: var(--color-white);
    color: var(--color-white);
}

.project-icon {
    position: absolute;
    bottom: var(--space-32);
    right: var(--space-32);
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc((var(--t-project-title-size) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    color: var(--color-text-dark);
    z-index: 1;
}

.project-card:hover:not([data-display-only]) .project-icon {
    color: var(--color-white);
}

.project-icon-lock::before {
    content: '\f023'; /* fa-lock */
    font-family: 'Font Awesome 7 Sharp';
    font-weight: 900;
}

.project-icon-unlock::before {
    content: '\f09c'; /* fa-unlock */
    font-family: 'Font Awesome 7 Sharp';
    font-weight: 900;
}

/* Locked card shake animation */
.project-card[data-locked] {
    cursor: pointer;
}

/* Display-only cards - default cursor */
.project-card[data-display-only] {
    cursor: default;
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30% {
        transform: translateX(-10px);
    }
    20%, 40% {
        transform: translateX(10px);
    }
    50% {
        transform: translateX(0);
    }
}

.project-card.shake {
    animation: shake 0.5s ease-out;
}

.project-icon-external::before {
    content: '\f08e'; /* fa-external-link */
    font-family: 'Font Awesome 7 Sharp';
    font-weight: 900;
}

.project-icon-plus::before {
    content: '\f067'; /* fa-plus */
    font-family: 'Font Awesome 7 Sharp';
    font-weight: 900;
}

/* ============================================
   Skills Section
   ============================================ */

/* ============================================
   Process Section
   ============================================ */

.process {
    background-color: var(--about-bg-color);
    padding: var(--spacing-section-padding);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-section-gap);
    position: relative;
}

.process .section-content-wrapper {
    max-width: var(--max-content-width);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-section-gap);
}

/* Process Intro Body */
.process-intro-body {
    font-size: calc((var(--t-section-heading-size) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    line-height: var(--t-section-heading-line-height-multiplier);
    letter-spacing: calc((var(--t-section-heading-letter-spacing) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    color: var(--about-text-color);
    margin-bottom: calc((74 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
}

/* Process Diagram */
.process-diagram {
    display: flex;
    position: relative;
    margin: 0;
    padding-left: var(--content-grid-col-width);
    width: 100%;
    max-width: var(--max-content-width);
    min-width: 0; /* Allow flex children to shrink */
    align-items: flex-start;
}



/* Horizontal line connecting circles */
.process-diagram::before {
    content: "";
    position: absolute;
    left: calc((9 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    right: 0px;
    top: calc((4 * var(--content-grid-col-width)) / 3); /* Approximately 1/3 from top of circle height */
    height: 1px; /* Fixed 1px, not scaling */
    background-color: var(--about-text-color);
}

/* Starting dot at left */
.process-diagram::after {
    content: "";
    position: absolute;
    left: 0;
    top: calc((4 * var(--content-grid-col-width)) / 3 - (4 / var(--t-divisor)) * min(100vw, var(--max-viewport))); /* Aligned with line, adjusted for dot size */
    width: calc((6 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    height: calc((6 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    border: var(--border-width) solid var(--about-text-color);
    border-radius: 50%;
    background: var(--about-bg-color);
    box-shadow: 0 0 0 calc((9 / var(--t-divisor)) * min(100vw, var(--max-viewport))) var(--about-bg-color);
}

/* Process Diagram Circles */
.process-diagram-circle {
    --diagram-circle-gap-unitless: 6;
    --diagram-circle-gap: calc((var(--diagram-circle-gap-unitless) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    position: relative;
    height: calc(4 * var(--content-grid-col-width));
    /* Line position: approximately 1/3 from top of circle height */
    --line-position: calc((4 * var(--content-grid-col-width)) / 3);
    transition: width 0.3s ease;
    flex-shrink: 1; /* Allow circles to shrink for smooth transitions */
}

.process-diagram-circle:first-child,
.process-diagram-circle:nth-child(2),
.process-diagram-circle:nth-child(3) {
    margin-right: var(--diagram-circle-gap);
}

/* Circle border */
.process-diagram-circle::after {
    content: "";
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    border: var(--border-width) solid var(--about-text-color);
    border-radius: 50%;
}

/* Circle 1 - Smallest (~97px = 2x) */
.process-diagram-circle:first-child {
    width: calc(2 * var(--content-grid-col-width));
    flex: 0 1 auto; /* No growth, allow shrink, auto basis so width can change */
}

/* Circle 2 - Small (~193px = 4x) */
.process-diagram-circle:nth-child(2) {
    width: calc(4 * var(--content-grid-col-width));
    flex: 0 1 auto; /* No growth, allow shrink, auto basis so width can change */
}

/* Circle 3 - Medium (~387px = 8x) */
.process-diagram-circle:nth-child(3) {
    width: calc(8 * var(--content-grid-col-width));
    flex: 0 1 auto; /* No growth, allow shrink, auto basis so width can change */
}

/* Circle 4 - Large (~774px = 16x) - expands to fill remaining space */
.process-diagram-circle:nth-child(4) {
    width: calc(16 * var(--content-grid-col-width));
    flex: 1 1 auto; /* Same as others: allow growth/shrink, auto basis so width can change */
}

/* Cover line after circle 4 */
.process-diagram-circle:nth-child(4)::before {
    content: "";
    position: absolute;
    left: 50%;
    right: calc((-1 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    top: calc((4 * var(--content-grid-col-width)) / 3 - (4 / var(--t-divisor)) * min(100vw, var(--max-viewport))); /* Aligned with line, adjusted for cover */
    height: calc((8 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    background: var(--about-bg-color);
}

/* Step labels inside circles */
.process-diagram-step {
    position: absolute;
    left: 50%;
    top: calc((4 * var(--content-grid-col-width)) / 3); /* Aligned with line position */
    transform: translate3d(-50%, calc(-100% + (4 / var(--t-divisor)) * min(100vw, var(--max-viewport))), 0);
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 0 calc((12 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    font-size: calc((16 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    line-height: 1.4375; /* 23 / 16 */
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
    font-weight: 100; /* Thinnest weight - San Francisco variable font */
    font-variation-settings: "wdth" 50; /* Smallest width - San Francisco variable font */
    transition: font-weight 0.3s ease, font-variation-settings 0.3s ease;
    color: var(--about-text-color);
}

/* Dot below step label */
.process-diagram-step::after {
    content: "";
    display: block;
    width: calc((6 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    height: calc((6 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    border: var(--border-width) solid var(--about-text-color);
    border-radius: 50%;
    background-color: var(--about-text-color);
    box-shadow: 0 0 0 calc((9 / var(--t-divisor)) * min(100vw, var(--max-viewport))) var(--about-bg-color);
    margin-top: calc((3 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    position: relative;
    z-index: 1;
}

/* Process Steps */
.process-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-card-gap);
    width: 100%;
}

/* Medium size: 2x2 grid */
@media (min-width: 40rem) and (max-width: 63.9375rem) {
    .process-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-card-gap);
    }
}

.process-step {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: start;
}

.process-step-title {
    font-weight: 400;
    font-family: var(--font-family);
    color: var(--about-text-color);
    margin: 0;
}

/* Process section h3 uses same styling as note-content h3 */
.process h3 {
    font-size: calc((var(--t-section-heading-size) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    font-weight: 400; /* Normal weight - San Francisco variable font */
    line-height: var(--t-section-heading-line-height-multiplier);
    letter-spacing: calc((var(--t-section-heading-letter-spacing) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    color: var(--about-text-color);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
    font-variation-settings: "wdth" 100; /* Normal width - San Francisco variable font */
    transition: font-weight 0.3s ease, font-variation-settings 0.3s ease;
}

/* On hover, transition to heaviest weight (900) and max width - Desktop only */
@media (min-width: 64rem) {
    .process-step:hover h3 {
        font-weight: 900; /* Heaviest weight - San Francisco variable font */
        font-variation-settings: "wdth" 200; /* Maximum width - San Francisco variable font */
    }
    
    /* Animate diagram step text when hovering corresponding process step */
    .process:has(.process-step:first-child:hover) .process-diagram-circle:first-child .process-diagram-step {
        font-weight: 900;
        font-variation-settings: "wdth" 200;
    }
    
    .process:has(.process-step:first-child:hover) .process-diagram-circle:nth-child(4) .process-diagram-step {
        font-weight: 100;
        font-variation-settings: "wdth" 50;
    }
    
    .process:has(.process-step:first-child:hover) .process-step:nth-child(4) h3 {
        font-weight: 400;
        font-variation-settings: "wdth" 100;
    }
    
    .process:has(.process-step:nth-child(2):hover) .process-diagram-circle:nth-child(2) .process-diagram-step {
        font-weight: 900;
        font-variation-settings: "wdth" 200;
    }
    
    .process:has(.process-step:nth-child(2):hover) .process-diagram-circle:nth-child(4) .process-diagram-step {
        font-weight: 100;
        font-variation-settings: "wdth" 50;
    }
    
    .process:has(.process-step:nth-child(2):hover) .process-step:nth-child(4) h3 {
        font-weight: 400;
        font-variation-settings: "wdth" 100;
    }
    
    .process:has(.process-step:nth-child(3):hover) .process-diagram-circle:nth-child(3) .process-diagram-step {
        font-weight: 900;
        font-variation-settings: "wdth" 200;
    }
    
    .process:has(.process-step:nth-child(3):hover) .process-diagram-circle:nth-child(4) .process-diagram-step {
        font-weight: 100;
        font-variation-settings: "wdth" 50;
    }
    
    .process:has(.process-step:nth-child(3):hover) .process-step:nth-child(4) h3 {
        font-weight: 400;
        font-variation-settings: "wdth" 100;
    }
    
    .process:has(.process-step:nth-child(4):hover) .process-diagram-circle:nth-child(4) .process-diagram-step {
        font-weight: 900;
        font-variation-settings: "wdth" 200;
    }
    
    /* Default state: Circle 4 is highlighted by default (largest circle) */
    .process-diagram-circle:nth-child(4) .process-diagram-step {
        font-weight: 900;
        font-variation-settings: "wdth" 200;
    }
    
    /* Default state: Step 4 h3 is highlighted by default (matches circle 4) */
    .process-step:nth-child(4) h3 {
        font-weight: 900;
        font-variation-settings: "wdth" 200;
    }
}

.process-step-body {
    font-size: calc((var(--t-hero-text-size) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    line-height: var(--t-hero-text-line-height-multiplier);
    letter-spacing: calc((var(--t-hero-text-letter-spacing) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    color: var(--about-text-color);
    margin: 0;
}

.process-step-body em {
    font-style: italic;
}

.process-step-body a {
    color: var(--about-text-color);
    text-decoration: underline;
    background-color: transparent;
    padding: 0.1em 0.2em;
    margin: 0 -0.2em;
}

.process-step-body a:hover {
    background-color: var(--about-text-color);
    color: var(--about-bg-color);
}

/* Hover Interactions - Desktop only */
@media (min-width: 64rem) {
    /* When hovering Step 1 (Make): 
       - Circle 1: 16x (largest - hovered)
       - Circle 2: 8x (2nd largest - 1 step away)
       - Circle 3: 4x (2nd smallest - 2 steps away)
       - Circle 4: 2x (smallest - 3 steps away) */
    .process:has(.process-step:first-child:hover) .process-diagram-circle:first-child {
        width: calc(16 * var(--content-grid-col-width));
    }
    
    .process:has(.process-step:first-child:hover) .process-diagram-circle:nth-child(2) {
        width: calc(8 * var(--content-grid-col-width));
    }
    
    .process:has(.process-step:first-child:hover) .process-diagram-circle:nth-child(3) {
        width: calc(4 * var(--content-grid-col-width));
    }
    
    .process:has(.process-step:first-child:hover) .process-diagram-circle:nth-child(4) {
        width: calc(2 * var(--content-grid-col-width));
    }
    
    /* When hovering Step 2 (Explore):
       - Circle 1: 2x (smallest - 1 step away)
       - Circle 2: 16x (largest - hovered)
       - Circle 3: 8x (2nd largest - 1 step away)
       - Circle 4: 4x (2nd smallest - 2 steps away) */
    .process:has(.process-step:nth-child(2):hover) .process-diagram-circle:first-child {
        width: calc(2 * var(--content-grid-col-width));
    }
    
    .process:has(.process-step:nth-child(2):hover) .process-diagram-circle:nth-child(2) {
        width: calc(16 * var(--content-grid-col-width));
    }
    
    .process:has(.process-step:nth-child(2):hover) .process-diagram-circle:nth-child(3) {
        width: calc(8 * var(--content-grid-col-width));
    }
    
    .process:has(.process-step:nth-child(2):hover) .process-diagram-circle:nth-child(4) {
        width: calc(4 * var(--content-grid-col-width));
    }
    
    /* When hovering Step 3 (Grow):
       - Circle 1: 2x (smallest - 2 steps away, farthest)
       - Circle 2: 8x (2nd largest - 1 step away, same as Share)
       - Circle 3: 16x (largest - hovered)
       - Circle 4: 8x (2nd largest - 1 step away, same as Explore) */
    .process:has(.process-step:nth-child(3):hover) .process-diagram-circle:first-child {
        width: calc(2 * var(--content-grid-col-width));
    }
    
    .process:has(.process-step:nth-child(3):hover) .process-diagram-circle:nth-child(2) {
        width: calc(8 * var(--content-grid-col-width));
    }
    
    .process:has(.process-step:nth-child(3):hover) .process-diagram-circle:nth-child(3) {
        width: calc(16 * var(--content-grid-col-width));
    }
    
    .process:has(.process-step:nth-child(3):hover) .process-diagram-circle:nth-child(4) {
        width: calc(8 * var(--content-grid-col-width));
    }
    
    /* When hovering Step 4 (Share):
       - Circle 1: 2x (smallest - 3 steps away, farthest)
       - Circle 2: 4x (2nd smallest - 2 steps away)
       - Circle 3: 8x (2nd largest - 1 step away)
       - Circle 4: 16x (largest - hovered) */
    .process:has(.process-step:nth-child(4):hover) .process-diagram-circle:first-child {
        width: calc(2 * var(--content-grid-col-width));
    }
    
    .process:has(.process-step:nth-child(4):hover) .process-diagram-circle:nth-child(2) {
        width: calc(4 * var(--content-grid-col-width));
    }
    
    .process:has(.process-step:nth-child(4):hover) .process-diagram-circle:nth-child(3) {
        width: calc(8 * var(--content-grid-col-width));
    }
    
    .process:has(.process-step:nth-child(4):hover) .process-diagram-circle:nth-child(4) {
        width: calc(16 * var(--content-grid-col-width));
    }
}

/* Mobile Responsive - matches original reference breakpoint */
@media (max-width: 64rem) {
    .process-diagram {
        margin-left: calc(-0.5 * var(--content-grid-col-width));
        padding-left: calc(0.5 * var(--content-grid-col-width));
        width: calc(100% + (0.5 * var(--content-grid-col-width))); /* Extend to fill width including negative margin */
    }
    
    .process-diagram::before {
        left: calc((6 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
        top: calc((4 * var(--content-grid-col-width)) / 3); /* Same proportional position as desktop */
    }
    
    .process-diagram::after {
        height: calc((6 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
        width: calc((6 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
        top: calc((4 * var(--content-grid-col-width)) / 3 - (4 / var(--t-divisor)) * min(100vw, var(--max-viewport))); /* Aligned with line */
        box-shadow: 0 0 0 calc((5 / var(--t-divisor)) * min(100vw, var(--max-viewport))) var(--about-bg-color);
    }
    
    .process-diagram-circle {
        height: calc(4 * var(--content-grid-col-width));
    }
    
    .process-diagram-circle:first-child {
        animation: process-circle-1-mobile 18s ease-out infinite;
    }
    
    .process-diagram-circle:nth-child(2) {
        animation: process-circle-2-mobile 18s ease-out infinite;
    }
    
    .process-diagram-circle:nth-child(3) {
        animation: process-circle-3-mobile 18s ease-out infinite;
    }
    
    .process-diagram-circle:nth-child(4) {
        animation: process-circle-4-mobile 18s ease-out infinite;
    }
    
    /* Animate h3 text to match highlighted circle - use transitions for smooth interpolation */
    .process-step:first-child h3 {
        animation: process-h3-1-mobile 18s linear infinite;
    }
    
    .process-step:nth-child(2) h3 {
        animation: process-h3-2-mobile 18s linear infinite;
    }
    
    .process-step:nth-child(3) h3 {
        animation: process-h3-3-mobile 18s linear infinite;
    }
    
    .process-step:nth-child(4) h3 {
        animation: process-h3-4-mobile 18s linear infinite;
    }
    
    /* Animate diagram step text to match highlighted circle - starts at smallest width (50) */
    .process-diagram-circle:first-child .process-diagram-step {
        animation: process-diagram-step-1-mobile 18s linear infinite;
    }

    .process-diagram-circle:nth-child(2) .process-diagram-step {
        animation: process-diagram-step-2-mobile 18s linear infinite;
    }

    .process-diagram-circle:nth-child(3) .process-diagram-step {
        animation: process-diagram-step-3-mobile 18s linear infinite;
    }

    .process-diagram-circle:nth-child(4) .process-diagram-step {
        animation: process-diagram-step-4-mobile 18s linear infinite;
    }
    
    .process-diagram-step {
        top: calc((4 * var(--content-grid-col-width)) / 3); /* Aligned with line position */
        transform: translate3d(-50%, calc(-100% + (2.5 / var(--t-divisor)) * min(100vw, var(--max-viewport))), 0);
        padding: 0;
        /* Hide and collapse actual text content on mobile */
        font-size: 0;
        color: transparent;
    }

    /* Show single letter via ::before on mobile */
    .process-diagram-step::before {
        content: attr(data-letter);
        color: var(--about-text-color);
        font-size: calc((16 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
        font-weight: inherit;
        font-variation-settings: inherit;
    }
    
    .process-diagram-step::after {
        font-size: initial; /* Restore font-size for dot positioning */
        height: calc((6 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
        width: calc((6 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
        border: var(--border-width) solid var(--about-text-color);
        background-color: var(--about-text-color);
        box-shadow: 0 0 0 calc((5 / var(--t-divisor)) * min(100vw, var(--max-viewport))) var(--about-bg-color);
        margin-top: 0;
    }
    
    .process-diagram-circle:nth-child(4)::before {
        top: calc((4 * var(--content-grid-col-width)) / 3 - (4 / var(--t-divisor)) * min(100vw, var(--max-viewport))); /* Aligned with line */
    }
    
}

/* Mobile Animations - Each circle expands to 16x in sequence */
/* 18s total cycle: 0.5s transition + 4s pause per step */
/* Step 1: 0-0.5s transition, 0.5-4.5s pause (0% to 2.78%, 2.78% to 25%) */
/* Step 2: 4.5-5s transition, 5-9s pause (25% to 27.78%, 27.78% to 50%) */
/* Step 3: 9-9.5s transition, 9.5-13.5s pause (50% to 52.78%, 52.78% to 75%) */
/* Step 4: 13.5-14s transition, 14-18s pause (75% to 77.78%, 77.78% to 100%) */
@keyframes process-circle-1-mobile {
    /* Transition to Circle 1 expanded (0-0.5s) */
    0% {
        width: calc(2 * var(--content-grid-col-width));
    }
    /* Circle 1 expanded - hold (0.5-4.5s) */
    2.78%, 25% {
        width: calc(16 * var(--content-grid-col-width));
    }
    /* Transition to Circle 2 expanded (4.5-5s) */
    27.78% {
        width: calc(2 * var(--content-grid-col-width));
    }
    /* Circle 2 expanded - hold (5-9s) */
    50% {
        width: calc(2 * var(--content-grid-col-width));
    }
    /* Transition to Circle 3 expanded (9-9.5s) */
    52.78% {
        width: calc(4 * var(--content-grid-col-width));
    }
    /* Circle 3 expanded - hold (9.5-13.5s) */
    75% {
        width: calc(4 * var(--content-grid-col-width));
    }
    /* Transition to Circle 4 expanded (13.5-14s) */
    77.78% {
        width: calc(2 * var(--content-grid-col-width));
    }
    /* Circle 4 expanded - hold (14-18s), then loop back */
    100% {
        width: calc(2 * var(--content-grid-col-width));
    }
}

@keyframes process-circle-2-mobile {
    /* Transition to Circle 1 expanded (0-0.5s) */
    0% {
        width: calc(4 * var(--content-grid-col-width));
    }
    /* Circle 1 expanded - hold (0.5-4.5s) */
    2.78%, 25% {
        width: calc(8 * var(--content-grid-col-width));
    }
    /* Transition to Circle 2 expanded (4.5-5s) */
    27.78% {
        width: calc(16 * var(--content-grid-col-width));
    }
    /* Circle 2 expanded - hold (5-9s) */
    50% {
        width: calc(16 * var(--content-grid-col-width));
    }
    /* Transition to Circle 3 expanded (9-9.5s) */
    52.78% {
        width: calc(2 * var(--content-grid-col-width));
    }
    /* Circle 3 expanded - hold (9.5-13.5s) */
    75% {
        width: calc(2 * var(--content-grid-col-width));
    }
    /* Transition to Circle 4 expanded (13.5-14s) */
    77.78% {
        width: calc(4 * var(--content-grid-col-width));
    }
    /* Circle 4 expanded - hold (14-18s), then loop back */
    100% {
        width: calc(4 * var(--content-grid-col-width));
    }
}

@keyframes process-circle-3-mobile {
    /* Transition to Circle 1 expanded (0-0.5s) */
    0% {
        width: calc(8 * var(--content-grid-col-width));
    }
    /* Circle 1 expanded - hold (0.5-4.5s) */
    2.78%, 25% {
        width: calc(4 * var(--content-grid-col-width));
    }
    /* Transition to Circle 2 expanded (4.5-5s) */
    27.78% {
        width: calc(8 * var(--content-grid-col-width));
    }
    /* Circle 2 expanded - hold (5-9s) */
    50% {
        width: calc(8 * var(--content-grid-col-width));
    }
    /* Transition to Circle 3 expanded (9-9.5s) */
    52.78% {
        width: calc(16 * var(--content-grid-col-width));
    }
    /* Circle 3 expanded - hold (9.5-13.5s) */
    75% {
        width: calc(16 * var(--content-grid-col-width));
    }
    /* Transition to Circle 4 expanded (13.5-14s) */
    77.78% {
        width: calc(8 * var(--content-grid-col-width));
    }
    /* Circle 4 expanded - hold (14-18s), then loop back */
    100% {
        width: calc(8 * var(--content-grid-col-width));
    }
}

@keyframes process-circle-4-mobile {
    /* Transition to Circle 1 expanded (0-0.5s) */
    0% {
        width: calc(16 * var(--content-grid-col-width));
    }
    /* Circle 1 expanded - hold (0.5-4.5s) */
    2.78%, 25% {
        width: calc(2 * var(--content-grid-col-width));
    }
    /* Transition to Circle 2 expanded (4.5-5s) */
    27.78% {
        width: calc(4 * var(--content-grid-col-width));
    }
    /* Circle 2 expanded - hold (5-9s) */
    50% {
        width: calc(4 * var(--content-grid-col-width));
    }
    /* Transition to Circle 3 expanded (9-9.5s) */
    52.78% {
        width: calc(8 * var(--content-grid-col-width));
    }
    /* Circle 3 expanded - hold (9.5-13.5s) */
    75% {
        width: calc(8 * var(--content-grid-col-width));
    }
    /* Transition to Circle 4 expanded (13.5-14s) */
    77.78% {
        width: calc(16 * var(--content-grid-col-width));
    }
    /* Circle 4 expanded - hold (14-18s), then loop back */
    100% {
        width: calc(16 * var(--content-grid-col-width));
    }
}

/* Mobile h3 animations - match circle expansion timing */
@keyframes process-h3-1-mobile {
    /* Transition to Step 1 highlighted (0-0.5s) */
    0% {
        font-weight: 400;
        font-variation-settings: "wdth" 100;
    }
    /* Step 1 highlighted - hold (0.5-4.5s) */
    2.78%, 25% {
        font-weight: 900;
        font-variation-settings: "wdth" 200;
    }
    /* Transition away from Step 1 (4.5-5s) */
    27.78% {
        font-weight: 400;
        font-variation-settings: "wdth" 100;
    }
    /* Other steps highlighted - hold */
    50%, 75%, 100% {
        font-weight: 400;
        font-variation-settings: "wdth" 100;
    }
}

@keyframes process-h3-2-mobile {
    /* Step 1 highlighted - hold */
    0%, 25% {
        font-weight: 400;
        font-variation-settings: "wdth" 100;
    }
    /* Transition to Step 2 highlighted (4.5-5s) */
    27.78% {
        font-weight: 900;
        font-variation-settings: "wdth" 200;
    }
    /* Step 2 highlighted - hold (5-9s) */
    50% {
        font-weight: 900;
        font-variation-settings: "wdth" 200;
    }
    /* Transition away from Step 2 (9-9.5s) */
    52.78% {
        font-weight: 400;
        font-variation-settings: "wdth" 100;
    }
    /* Other steps highlighted - hold */
    75%, 100% {
        font-weight: 400;
        font-variation-settings: "wdth" 100;
    }
}

@keyframes process-h3-3-mobile {
    /* Steps 1 and 2 highlighted - hold */
    0%, 25%, 50% {
        font-weight: 400;
        font-variation-settings: "wdth" 100;
    }
    /* Transition to Step 3 highlighted (9-9.5s) */
    52.78% {
        font-weight: 900;
        font-variation-settings: "wdth" 200;
    }
    /* Step 3 highlighted - hold (9.5-13.5s) */
    75% {
        font-weight: 900;
        font-variation-settings: "wdth" 200;
    }
    /* Transition away from Step 3 (13.5-14s) */
    77.78% {
        font-weight: 400;
        font-variation-settings: "wdth" 100;
    }
    /* Step 4 highlighted - hold */
    100% {
        font-weight: 400;
        font-variation-settings: "wdth" 100;
    }
}

@keyframes process-h3-4-mobile {
    /* Steps 1, 2, and 3 highlighted - hold */
    0%, 25%, 50%, 75% {
        font-weight: 400;
        font-variation-settings: "wdth" 100;
    }
    /* Transition to Step 4 highlighted (13.5-14s) */
    77.78% {
        font-weight: 900;
        font-variation-settings: "wdth" 200;
    }
    /* Step 4 highlighted - hold (14-18s), then loop back */
    100% {
        font-weight: 900;
        font-variation-settings: "wdth" 200;
    }
}

/* Mobile diagram step text animations - start at smallest width (50) and thinnest weight (100) */
@keyframes process-diagram-step-1-mobile {
    /* Transition to Step 1 highlighted (0-0.5s) */
    0% {
        font-weight: 100;
        font-variation-settings: "wdth" 50;
    }
    /* Step 1 highlighted - hold (0.5-4.5s) */
    2.78%, 25% {
        font-weight: 900;
        font-variation-settings: "wdth" 200;
    }
    /* Transition away from Step 1 (4.5-5s) */
    27.78% {
        font-weight: 100;
        font-variation-settings: "wdth" 50;
    }
    /* Other steps highlighted - hold */
    50%, 75%, 100% {
        font-weight: 100;
        font-variation-settings: "wdth" 50;
    }
}

@keyframes process-diagram-step-2-mobile {
    /* Step 1 highlighted - hold */
    0%, 25% {
        font-weight: 100;
        font-variation-settings: "wdth" 50;
    }
    /* Transition to Step 2 highlighted (4.5-5s) */
    27.78% {
        font-weight: 900;
        font-variation-settings: "wdth" 200;
    }
    /* Step 2 highlighted - hold (5-9s) */
    50% {
        font-weight: 900;
        font-variation-settings: "wdth" 200;
    }
    /* Transition away from Step 2 (9-9.5s) */
    52.78% {
        font-weight: 100;
        font-variation-settings: "wdth" 50;
    }
    /* Other steps highlighted - hold */
    75%, 100% {
        font-weight: 100;
        font-variation-settings: "wdth" 50;
    }
}

@keyframes process-diagram-step-3-mobile {
    /* Steps 1 and 2 highlighted - hold */
    0%, 25%, 50% {
        font-weight: 100;
        font-variation-settings: "wdth" 50;
    }
    /* Transition to Step 3 highlighted (9-9.5s) */
    52.78% {
        font-weight: 900;
        font-variation-settings: "wdth" 200;
    }
    /* Step 3 highlighted - hold (9.5-13.5s) */
    75% {
        font-weight: 900;
        font-variation-settings: "wdth" 200;
    }
    /* Transition away from Step 3 (13.5-14s) */
    77.78% {
        font-weight: 100;
        font-variation-settings: "wdth" 50;
    }
    /* Step 4 highlighted - hold */
    100% {
        font-weight: 100;
        font-variation-settings: "wdth" 50;
    }
}

@keyframes process-diagram-step-4-mobile {
    /* Steps 1, 2, and 3 highlighted - hold */
    0%, 25%, 50%, 75% {
        font-weight: 100;
        font-variation-settings: "wdth" 50;
    }
    /* Transition to Step 4 highlighted (13.5-14s) */
    77.78% {
        font-weight: 900;
        font-variation-settings: "wdth" 200;
    }
    /* Step 4 highlighted - hold (14-18s), then loop back */
    100% {
        font-weight: 900;
        font-variation-settings: "wdth" 200;
    }
}

/* Tablet and Desktop - 4 column layout for steps */
@media (min-width: 64rem) {
    .process-diagram {
        margin-left: calc(-1 * var(--content-grid-col-width));
        width: calc(100% + var(--content-grid-col-width)); /* Extend to fill width including negative margin */
    }
    
    .process-steps {
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
    }
    
    .process-step {
        padding-right: var(--spacing-card-gap);
    }
    
    .process-step:first-child {
        grid-column: 1;
    }
    
    .process-step:nth-child(2) {
        grid-column: 2;
    }
    
    .process-step:nth-child(3) {
        grid-column: 3;
    }
    
    .process-step:nth-child(4) {
        grid-column: 4;
    }
}

/* ============================================
   Footer Section
   ============================================ */

.footer {
    background-color: var(--footer-bg-color);
    padding: var(--spacing-section-padding);
    display: flex;
    flex-direction: column;
    gap: var(--space-64);
    color: var(--footer-text-color);
}

.footer > * {
    max-width: var(--max-content-width);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.footer-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.footer-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc((29 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    color: var(--footer-text-color);
    text-decoration: none;
}

.footer-icon:hover {
    opacity: 0.7;
}

.footer-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-64);
    width: 100%;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
}

.footer-signature {
    display: flex;
    align-items: center;
    gap: var(--space-16);
    position: relative;
}

.footer-signature-graphic {
    width: calc((64 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    height: calc((29 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    display: block;
    color: inherit;
    flex-shrink: 0;
}

/* ============================================
   Responsive Design
   ============================================ */

/* Mobile layout adjustments */
@media (max-width: 39.9375rem) {
    .hero-content {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }
    
    .hero-image-wrapper {
        grid-row: 1;
        grid-column: 1;
        max-width: calc((186 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    }
    
    .body-text {
        grid-row: 2;
        grid-column: 1;
    }
    
    .hero-buttons {
        grid-row: 3;
        grid-column: 1;
    }
    
    /* Footer header stays horizontal on mobile - LinkedIn icon inline with heading */
    .footer-header {
        flex-direction: row;
        align-items: center;
    }
    
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-16);
    }
}

/* ============================================
   Note Layout Styles
   ============================================ */

/* Note Article Container */
.note-article {
    width: 100%;
    background-color: var(--color-grey-1);
    padding: var(--spacing-section-padding);
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-x: visible;
}

/* Note Hero Image Section */
.note-hero {
    margin-bottom: 0;
    margin-left: calc(-1 * var(--spacing-section-padding));
    margin-right: calc(-1 * var(--spacing-section-padding));
    width: calc(100% + (2 * var(--spacing-section-padding)));
    position: relative;
}

.note-hero-header {
    position: absolute;
    top: var(--spacing-section-padding);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--max-content-width);
    padding-left: var(--spacing-section-padding);
    padding-right: var(--spacing-section-padding);
    box-sizing: border-box;
    z-index: 10;
}

.note-hero-header div {
    margin: 0;
}

.note-hero-header a {
    display: inline-block;
}

.note-hero-header a:hover {
    color: var(--hero-text-color);
}

.note-hero-header a:hover .nav-home-icon {
    color: var(--hero-text-color);
}

.note-hero-header a.internal-link:after {
    content: "";
}

.nav-home-icon {
    color: var(--color-text-dark);
}

.note-hero-header .nav-home-icon {
    width: calc((64 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    height: calc((29 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    display: block;
    color: var(--color-text-dark);
}

/* Note Header Top - For pages without hero image */
.note-header-top {
    margin-bottom: var(--space-32);
    max-width: var(--max-content-width);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.note-header-top div {
    margin: 0;
}

.note-header-top a {
    display: inline-block;
}

.note-header-top a:hover {
    color: var(--hero-text-color);
}

.note-header-top a:hover .nav-home-icon {
    color: var(--hero-text-color);
}

.note-header-top a.internal-link:after {
    content: "";
}

.note-header-top .nav-home-icon {
    width: calc((64 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    height: calc((29 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    display: block;
    color: var(--color-text-dark);
}

.note-hero-image {
    width: 100%;
    min-height: calc((400 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.note-hero-caption {
    font-size: calc((var(--t-hero-text-size) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    line-height: var(--t-hero-text-line-height-multiplier);
    letter-spacing: calc((var(--t-hero-text-letter-spacing) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    color: var(--color-grey-4);
    text-align: center;
    padding: var(--space-16);
    margin: 0;
    background-color: rgba(255, 255, 255, 0.9);
    width: 100%;
}

/* Note Content Wrapper */
.note-content-wrapper {
    max-width: var(--max-content-width);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* Reduce spacing when content wrapper follows hero image */
.note-hero + .note-content-wrapper {
    margin-top: var(--space-32);
}

/* Note Header */
.note-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-64);
    margin-bottom: var(--spacing-section-gap);
    max-width: calc(var(--max-content-width) * 2 / 3);
}

.note-header h1 {
    font-size: calc((var(--t-hero-heading-size) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    font-weight: 400;
    line-height: var(--t-hero-heading-line-height-multiplier);
    letter-spacing: calc((var(--t-hero-heading-letter-spacing) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    color: var(--color-text-dark);
    margin: 0;
}

/* Note Metadata - Single Line - Uses h5 size, inherits body line-height (1.75) */
.note-meta {
    display: block;
    font-size: calc((var(--t-h5-size) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    letter-spacing: calc((var(--t-h5-letter-spacing) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    color: var(--color-grey-4);
    margin: 0;
}

.note-read-time {
    display: inline;
}

.note-meta span {
    display: inline;
    color: var(--color-grey-4);
}

/* Notes Entry Container - Grid Layout */
#notes-entry-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-section-gap);
    margin-bottom: var(--spacing-section-gap);
}

@media (min-width: 64rem) {
    #notes-entry-container {
        grid-template-columns: 3fr 1fr;
        gap: var(--spacing-card-gap);
    }
}

/* Content Area */
.note-content {
    display: block;
}


.note-content h1 {
    font-size: calc((var(--t-h1-size) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    font-weight: 400;
    line-height: var(--t-h1-line-height-multiplier);
    letter-spacing: calc((var(--t-h1-letter-spacing) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    color: var(--color-text-dark);
    margin-top: calc((var(--t-h1-size) * var(--t-h1-line-height-multiplier) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    margin-bottom: calc((var(--t-hero-text-size) * var(--t-hero-text-line-height-multiplier) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
}

.note-content h2 {
    font-size: calc((var(--t-h2-size) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    font-weight: 400;
    line-height: var(--t-h2-line-height-multiplier);
    letter-spacing: calc((var(--t-h2-letter-spacing) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    color: var(--color-text-dark);
    margin-top: calc((var(--t-h2-size) * var(--t-h2-line-height-multiplier) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    margin-bottom: calc((var(--t-hero-text-size) * var(--t-hero-text-line-height-multiplier) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
}

.note-content h3 {
    font-size: calc((var(--t-section-heading-size) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    font-weight: 400;
    line-height: var(--t-section-heading-line-height-multiplier);
    letter-spacing: calc((var(--t-section-heading-letter-spacing) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    color: var(--color-text-dark);
    margin-top: calc((var(--t-section-heading-size) * var(--t-section-heading-line-height-multiplier) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    margin-bottom: calc((var(--t-hero-text-size) * var(--t-hero-text-line-height-multiplier) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
}

.note-content h4 {
    font-size: calc((var(--t-h4-size) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    font-weight: 400;
    line-height: var(--t-h4-line-height-multiplier);
    letter-spacing: calc((var(--t-h4-letter-spacing) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    color: var(--color-text-dark);
    margin-top: calc((var(--t-h4-size) * var(--t-h4-line-height-multiplier) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    margin-bottom: calc((var(--t-hero-text-size) * var(--t-hero-text-line-height-multiplier) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
}

.note-content h5 {
    font-size: calc((var(--t-h5-size) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    font-weight: 400;
    line-height: var(--t-h5-line-height-multiplier);
    letter-spacing: calc((var(--t-h5-letter-spacing) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    color: var(--color-text-dark);
    margin-top: calc((var(--t-h5-size) * var(--t-h5-line-height-multiplier) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    margin-bottom: calc((var(--t-hero-text-size) * var(--t-hero-text-line-height-multiplier) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
}

.note-content h6 {
    font-size: calc((var(--t-h6-size) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    font-weight: 400;
    line-height: var(--t-h6-line-height-multiplier);
    letter-spacing: calc((var(--t-h6-letter-spacing) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    color: var(--color-text-dark);
    margin-top: calc((var(--t-h6-size) * var(--t-h6-line-height-multiplier) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    margin-bottom: calc((var(--t-hero-text-size) * var(--t-hero-text-line-height-multiplier) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
}

.note-content h1:first-child {
    margin-top: 0;
}

.note-content p {
    font-size: calc((var(--t-hero-text-size) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    line-height: var(--t-hero-text-line-height-multiplier);
    letter-spacing: calc((var(--t-hero-text-letter-spacing) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    color: var(--color-text-dark);
    margin-bottom: var(--space-64);
}

.note-content p:last-child {
    margin-bottom: 0;
}

.note-content ul,
.note-content ol {
    font-size: calc((var(--t-hero-text-size) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    line-height: var(--t-hero-text-line-height-multiplier);
    letter-spacing: calc((var(--t-hero-text-letter-spacing) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    color: var(--color-text-dark);
    margin-bottom: var(--space-64);
    padding-left: var(--space-24);
}

.note-content ul:last-child,
.note-content ol:last-child {
    margin-bottom: 0;
}

.note-content li {
    margin-bottom: var(--space-8);
}

.note-content li:last-child {
    margin-bottom: 0;
}

.note-content strong {
    font-weight: 700;
    color: var(--color-text-dark);
}

.note-content em {
    font-style: italic;
}

/* Links in Notes */
.note-content a {
    color: var(--hero-text-color);
    text-decoration: underline;
    background-color: transparent;
    padding: 0.1em 0.2em;
    margin: 0 -0.2em;
}

.note-content a:hover {
    background-color: var(--hero-text-color);
    color: var(--color-white);
}

/* External link icon */
.note-content a.external-link::after {
    content: "\f08e";
    font-family: "Font Awesome 7 Sharp";
    font-weight: 900;
    font-size: calc((16 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    margin-left: 0.25em;
    display: inline-block;
    vertical-align: baseline;
}

/* Sidebar */
.note-sidebar {
    display: none;
}

.note-sidebar-title {
    font-size: calc((var(--t-project-title-size) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    line-height: var(--t-project-title-line-height-multiplier);
    letter-spacing: calc((var(--t-project-title-letter-spacing) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    color: var(--color-text-dark);
    font-weight: 400;
    margin-bottom: var(--space-16);
    margin-top: 0;
}

.backlinks-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-16);
}

.backlinks-empty p {
    font-size: calc((var(--t-hero-text-size) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    line-height: var(--t-hero-text-line-height-multiplier);
    letter-spacing: calc((var(--t-hero-text-letter-spacing) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    color: var(--color-grey-4);
    margin-bottom: 0;
}

/* Backlink Boxes */
.backlink-box {
    background-color: var(--color-grey-1);
    border: var(--border-width) solid var(--color-grey-2);
    border-radius: var(--border-radius-medium);
    padding: var(--space-16);
    margin-bottom: var(--space-16);
}

.backlink-box:last-child {
    margin-bottom: 0;
}

.backlink-box:hover {
    border-color: var(--color-text-dark);
    background-color: var(--color-white);
}

.backlink-title {
    font-size: calc((var(--t-project-title-size) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    line-height: var(--t-project-title-line-height-multiplier);
    letter-spacing: calc((var(--t-project-title-letter-spacing) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    color: var(--color-text-dark);
    text-decoration: none;
    font-weight: 400;
    display: block;
    margin-bottom: var(--space-8);
}

.backlink-title:hover {
    color: var(--hero-text-color);
}

.backlink-excerpt {
    font-size: calc((var(--t-hero-text-size) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    line-height: var(--t-hero-text-line-height-multiplier);
    letter-spacing: calc((var(--t-hero-text-letter-spacing) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    color: var(--color-grey-4);
}

/* HR Separator - Scoped to note articles */
.note-article + hr {
    width: 100%;
    border: 0;
    height: 1px;
    background-color: var(--color-grey-2);
    margin: var(--spacing-section-gap) 0;
}

/* Notes Graph Section - Scoped to note articles */
.note-article + hr + p {
    font-size: calc((var(--t-hero-text-size) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    line-height: var(--t-hero-text-line-height-multiplier);
    letter-spacing: calc((var(--t-hero-text-letter-spacing) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    color: var(--color-grey-4);
    margin-bottom: var(--space-24);
    padding: 0 var(--spacing-section-padding);
    max-width: var(--max-content-width);
    margin-left: auto;
    margin-right: auto;
}

/* Invalid Links */
.invalid-link {
    color: var(--color-grey-4);
    cursor: help;
    background-color: var(--color-grey-1);
    padding: 0 0.1em;
    border-radius: calc((2 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
}

.invalid-link-brackets {
    color: var(--color-grey-3);
    cursor: help;
}

/* Code Blocks */
.note-content code {
    background-color: var(--color-grey-1);
    padding: 0.1em 0.3em;
    border-radius: calc((4 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    font-size: 0.9em;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    color: var(--color-text-dark);
}

.note-content pre {
    background-color: var(--color-grey-1);
    padding: var(--space-16);
    border-radius: var(--border-radius-medium);
    overflow-x: auto;
    margin-bottom: calc((22.4 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
}

.note-content pre code {
    background-color: transparent;
    padding: 0;
}

/* Blockquotes */
.note-content blockquote {
    border-left: calc(var(--border-width) * 2) solid var(--color-grey-2);
    padding-left: var(--space-24);
    margin-left: 0;
    margin-bottom: calc((22.4 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    color: var(--color-grey-4);
    font-style: italic;
}

.note-content blockquote p {
    margin-bottom: calc((22.4 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
}

.note-content blockquote p:last-child {
    margin-bottom: 0;
}

/* Images */
.note-content img {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-bottom: calc((22.4 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    display: block;
}

.note-content img:last-child {
    margin-bottom: 0;
}

/* Figures and Captions */
.note-content figure {
    margin: 0 0 var(--space-64) 0;
}

.note-content figure img {
    margin-bottom: 0;
}

.note-content figure video {
    width: 100%;
    height: auto;
    margin-bottom: 0;
    display: block;
}

.note-content figure iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 0;
    display: block;
    border: none;
}

.note-content figcaption {
    display: block;
    font-size: calc((var(--t-hero-text-size) * 0.857 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    line-height: var(--t-hero-text-line-height-multiplier);
    letter-spacing: 0;
    color: var(--color-grey-4);
    margin-top: calc((12 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    text-align: left;
}

/* Note Back Button */
.note-back-button-wrapper {
    margin-top: calc((64 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
}

.note-back-button {
    padding: calc((9 / var(--t-divisor)) * min(100vw, var(--max-viewport))) calc((25 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    height: calc((47 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    border: var(--border-width) solid var(--color-text-dark);
    border-radius: calc((8 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    background: transparent;
    color: var(--color-text-dark);
    font-size: calc((var(--t-chip-button-size) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    line-height: var(--t-chip-button-line-height-multiplier);
    letter-spacing: calc((var(--t-chip-button-letter-spacing) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    font-family: var(--font-family);
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.note-back-button:hover {
    background-color: var(--color-text-dark);
    color: var(--color-white);
}

/* Mobile: Full-width capsule back button */
@media (max-width: 39.9375rem) {
    .note-back-button {
        width: 100%;
        padding: calc((32 / var(--t-divisor)) * min(100vw, var(--max-viewport))) calc((24 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
        border-radius: 999px; /* Fully rounded capsule */
        display: flex;
    }
}

/* ============================================
   About Section
   ============================================ */

.about-section {
    /* Full-bleed background extending to viewport edges */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background-color: var(--about-bg-color);
    /* Use same padding as note-article for alignment across all breakpoints */
    padding: var(--spacing-section-padding);
    /* Add spacing below section */
    margin-bottom: var(--spacing-section-gap);
}

.about-content {
    /* Grid layout: 3fr for content, 1fr for empty space */
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: repeat(2, fit-content);
    gap: var(--space-64);
    max-width: var(--max-content-width);
    margin-left: auto;
    margin-right: auto;
}

.about-heading {
    /* Heading on first row, first column */
    grid-area: 1 / 1;

    /* Typography */
    font-size: calc((var(--t-section-heading-size) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    font-weight: 400;
    line-height: var(--t-section-heading-line-height-multiplier);
    letter-spacing: calc((var(--t-section-heading-letter-spacing) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    color: var(--about-text-color);
    margin: 0;
}

.about-text {
    grid-area: 2 / 1;
}

.about-text p {
    font-size: calc((var(--t-hero-text-size) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    line-height: var(--t-hero-text-line-height-multiplier);
    letter-spacing: calc((var(--t-hero-text-letter-spacing) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    color: var(--about-text-color);
    margin: 0;
}

.about-text a {
    color: inherit;
    text-decoration: underline;
    background-color: transparent;
    padding: 0.1em 0.2em;
    margin: 0 -0.2em;
}

.about-text a:hover {
    background-color: var(--about-text-color);
    color: var(--color-white);
}

.about-text a.external-link::after {
    content: "\f08e";
    font-family: "Font Awesome 7 Sharp";
    font-weight: 900;
    font-size: calc((16 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    margin-left: 0.25em;
    vertical-align: baseline;
    color: inherit;
}

/* Mobile adjustments */
@media (max-width: 39.9375rem) {
    .about-content {
        /* Single column on mobile */
        grid-template-columns: 1fr;
        gap: var(--space-24);
    }

    .about-heading {
        grid-area: 1 / 1;
    }

    .about-text {
        grid-area: 2 / 1;
    }
}

/* ============================================
   Gallery Section
   ============================================ */

.gallery-section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background-color: var(--color-white);
    padding-top: var(--spacing-section-padding);
    padding-bottom: var(--spacing-section-padding);
    margin-bottom: var(--spacing-section-gap);
    overflow-x: visible;
}

.gallery-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-64);
}

.gallery-header {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-section-gap);
    max-width: var(--max-content-width);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.gallery-header-content {
    display: flex;
    align-items: center;
    gap: calc((40 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    grid-column: 1;
}

@media (min-width: 64rem) {
    .gallery-header {
        grid-template-columns: 3fr 1fr;
        gap: var(--spacing-card-gap);
        padding-left: var(--spacing-section-padding);
        padding-right: var(--spacing-section-padding);
        margin-left: 0;
        margin-right: 0;
    }

    .gallery-track {
        padding-left: var(--spacing-section-padding);
        padding-right: var(--spacing-section-padding);
        scroll-padding-left: var(--spacing-section-padding);
        scroll-padding-right: var(--spacing-section-padding);
    }

    .gallery-track figure {
        width: calc(100vw - (var(--spacing-section-padding) * 2));
        max-width: var(--max-content-width);
    }
}

.gallery-title {
    font-size: calc((var(--t-section-heading-size) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    font-weight: 400;
    line-height: var(--t-section-heading-line-height-multiplier);
    letter-spacing: calc((var(--t-section-heading-letter-spacing) / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    color: var(--color-text-dark);
    margin: 0;
}

.gallery-nav-buttons {
    display: flex;
    align-items: center;
    gap: calc((8 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
}

.gallery-track {
    display: flex;
    gap: var(--space-64);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 90rem) {
    .gallery-header {
        padding-left: 0;
        padding-right: 0;
        margin-left: auto;
        margin-right: auto;
    }

    .gallery-track {
        padding-left: calc((100vw - var(--max-content-width)) / 2);
        padding-right: calc((100vw - var(--max-content-width)) / 2);
        scroll-padding-left: calc((100vw - var(--max-content-width)) / 2);
        scroll-padding-right: calc((100vw - var(--max-content-width)) / 2);
    }
}

@media (min-width: 40rem) and (max-width: 63.9375rem) {
    .gallery-track {
        padding-left: var(--spacing-section-padding);
        padding-right: var(--spacing-section-padding);
        scroll-padding-left: var(--spacing-section-padding);
        scroll-padding-right: var(--spacing-section-padding);
    }

    .gallery-track figure {
        width: calc(100vw - (var(--spacing-section-padding) * 2));
        max-width: var(--max-content-width);
    }
}


.gallery-track::-webkit-scrollbar {
    display: none;
}

.gallery-track figure {
    flex: 0 0 auto;
    width: var(--max-content-width);
    max-width: 100%;
    scroll-snap-align: center;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: calc((12 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
}

.gallery-track figure img {
    width: 100%;
    height: auto;
    display: block;
    cursor: pointer;
}

.gallery-track figure figcaption {
    display: block;
    font-size: calc((var(--t-hero-text-size) * 0.857 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    line-height: var(--t-hero-text-line-height-multiplier);
    letter-spacing: 0;
    color: var(--color-grey-4);
    margin: 0;
    text-align: left;
}


.gallery-nav {
    width: calc((47 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    height: calc((47 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    flex-shrink: 0;
    border: var(--border-width) solid var(--color-text-dark);
    border-radius: calc((8 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    background-color: transparent;
    color: var(--color-text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.gallery-nav:hover {
    background-color: var(--color-text-dark);
    color: var(--color-white);
}

.gallery-nav i {
    font-size: calc((14 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    line-height: calc(22.4 / 14);
    color: inherit;
}

.gallery-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.gallery-nav:disabled:hover {
    background-color: transparent;
    color: var(--color-text-dark);
}

@media (max-width: 63.9375rem) {
    .gallery-header {
        padding-left: var(--spacing-section-padding);
        padding-right: var(--spacing-section-padding);
    }
}

@media (max-width: 39.9375rem) {
    .gallery-track {
        padding-left: var(--spacing-section-padding);
        padding-right: var(--spacing-section-padding);
        scroll-padding-left: var(--spacing-section-padding);
        scroll-padding-right: var(--spacing-section-padding);
    }

    .gallery-track figure {
        width: calc(100vw - (var(--spacing-section-padding) * 2));
    }

    .gallery-nav {
        width: calc((40 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
        height: calc((40 / var(--t-divisor)) * min(100vw, var(--max-viewport)));
    }
}