@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&family=Merriweather:wght@400;700&family=Playfair+Display:wght@700;900&display=swap');

/* CSS Variables with Fallbacks */
:root {
    /* Enable light-dark() support - Baseline 2024 */
    /*using light-dark() Baseline 2024 feature
   light-dark() automatically adapts colors based on the color-scheme preference.
   This provides automatic dark mode support, adapting the form background
   to be lighter in light mode and darker in dark mode for better contrast. */
    color-scheme: light dark;

    --color-primary: light-dark(#0f172a, #f8fafc);
    --color-secondary: light-dark(#1e293b, #cbd5e1);
    --color-accent: light-dark(#8b5cf6, #a78bfa);
    --color-accent-hover: light-dark(#7c3aed, #c4b5fd);
    --color-accent-2: light-dark(#ec4899, #f9a8d4);
    --color-accent-3: light-dark(#06b6d4, #67e8f9);
    --color-accent-4: light-dark(#10b981, #6ee7b7);
    --color-accent-5: light-dark(#f59e0b, #fbbf24);
    --color-bg: light-dark(#fef3ff, #1e1b4b);
    --color-bg-alt: light-dark(#f0f9ff, #312e81);
    --color-bg-card: light-dark(#fff7ed, #3730a3);
    --color-border: light-dark(#8b5cf6, #a78bfa);
    --color-border-pink: light-dark(#ec4899, #f9a8d4);
    --color-border-cyan: light-dark(#06b6d4, #67e8f9);
    --color-text: light-dark(#0f172a, #f8fafc);
    --color-text-muted: light-dark(#64748b, #cbd5e1);

    /* Spacing - Relative Units */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;

    /* Typography */
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;

    /* Custom Fonts with Fallbacks - IDE Style */
    --font-primary: 'JetBrains Mono', 'Consolas', 'Monaco', 'Courier New', monospace;
    --font-mono: 'Space Mono', 'Courier New', monospace;
    --font-serif: 'Merriweather', 'Georgia', serif;
    --font-display: 'Playfair Display', 'Georgia', serif;

    /* Border Radius */
    --radius-sm: 0.125rem;
    --radius-md: 0.25rem;
    --radius-lg: 0.5rem;

    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

/* Theme overrides when JS toggles data-theme on the documentElement */
/* These override a subset of color variables to provide a clear dark theme. */
:root[data-theme="dark"] {
    --color-bg: #0b1020;
    --color-bg-alt: #11121a;
    --color-bg-card: #0f1724;
    --color-border: #3b82f6;
    --color-border-pink: #f472b6;
    --color-border-cyan: #06b6d4;
    --color-text: #e6eef8;
    --color-text-muted: #94a3b8;
    --color-accent: #8b5cf6;
    --color-accent-2: #ec4899;
    --color-accent-3: #06b6d4;
}

/* Explicit light theme when user chooses 'light' via data-theme */
:root[data-theme="light"] {
    --color-primary: #0f172a;
    --color-secondary: #1e293b;
    --color-accent: #8b5cf6;
    --color-accent-hover: #7c3aed;
    --color-accent-2: #ec4899;
    --color-accent-3: #06b6d4;
    --color-accent-4: #10b981;
    --color-accent-5: #f59e0b;
    --color-bg: #fef3ff;
    --color-bg-alt: #f0f9ff;
    --color-bg-card: #fff7ed;
    --color-border: #8b5cf6;
    --color-border-pink: #ec4899;
    --color-border-cyan: #06b6d4;
    --color-text: #0f172a;
    --color-text-muted: #64748b;
}

/* Ocean theme - Deep blues and teals with aquatic palette */
:root[data-theme="ocean"] {
    --color-primary: #0c4a6e;
    --color-secondary: #075985;
    --color-accent: #06b6d4;
    --color-accent-hover: #0891b2;
    --color-accent-2: #22d3ee;
    --color-accent-3: #3b82f6;
    --color-accent-4: #0ea5e9;
    --color-accent-5: #14b8a6;
    --color-bg: #001a33;
    --color-bg-alt: #002244;
    --color-bg-card: #003355;
    --color-border: #06b6d4;
    --color-border-pink: #22d3ee;
    --color-border-cyan: #0ea5e9;
    --color-text: #e0f2fe;
    --color-text-muted: #7dd3fc;
    --font-primary: 'Space Mono', monospace;
}

/* Forest theme - Greens and earth tones with nature-inspired palette */
:root[data-theme="forest"] {
    --color-primary: #14532d;
    --color-secondary: #166534;
    --color-accent: #10b981;
    --color-accent-hover: #059669;
    --color-accent-2: #84cc16;
    --color-accent-3: #22c55e;
    --color-accent-4: #4ade80;
    --color-accent-5: #a3e635;
    --color-bg: #0a2818;
    --color-bg-alt: #0f3e26;
    --color-bg-card: #134d2f;
    --color-border: #10b981;
    --color-border-pink: #84cc16;
    --color-border-cyan: #22c55e;
    --color-text: #d1fae5;
    --color-text-muted: #86efac;
    --font-primary: 'Merriweather', serif;
}

/* Sunset theme - Warm oranges, purples, and golden hues */
:root[data-theme="sunset"] {
    --color-primary: #7c2d12;
    --color-secondary: #9a3412;
    --color-accent: #f97316;
    --color-accent-hover: #ea580c;
    --color-accent-2: #fb923c;
    --color-accent-3: #fbbf24;
    --color-accent-4: #f59e0b;
    --color-accent-5: #dc2626;
    --color-bg: #1a0f0a;
    --color-bg-alt: #2d1810;
    --color-bg-card: #3f2418;
    --color-border: #f97316;
    --color-border-pink: #fb923c;
    --color-border-cyan: #fbbf24;
    --color-text: #ffedd5;
    --color-text-muted: #fdba74;
    --font-primary: 'Playfair Display', serif;
}

/* Smooth transition for theme change */
html, body {
    transition: background-color 220ms ease, color 220ms ease;
}

/* CSS Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 100%;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

/* Dynamic Viewport Units */
body {
    font-family: var(--font-primary, sans-serif);
    font-size: var(--font-size-base, 1rem);
    line-height: 1.6;
    color: var(--color-text, #171717);
    background-color: var(--color-bg, #ffffff);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-md, 1rem);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: var(--spacing-md, 1rem);
    color: var(--color-text, #171717);
}

h1 {
    font-size: var(--font-size-4xl, 2.25rem);
    font-weight: 700;
}

h2 {
    font-size: var(--font-size-3xl, 1.875rem);
}

h3 {
    font-size: var(--font-size-2xl, 1.5rem);
}

h4 {
    font-size: var(--font-size-xl, 1.25rem);
}

h5, h6 {
    font-size: var(--font-size-lg, 1.125rem);
}

p {
    margin-bottom: var(--spacing-md, 1rem);
    line-height: 1.7;
}

a {
    color: var(--color-accent, #8b5cf6);
    text-decoration: none;
    transition: color var(--transition-fast, 150ms);

    &:hover {
        color: var(--color-accent-2, #ec4899);
        text-decoration: underline;
    }

    &:focus-visible {
        outline: 2px solid var(--color-accent, #8b5cf6);
        outline-offset: 2px;
        border-radius: var(--radius-sm, 0.125rem);
    }
}

/* Layout Container */
main {
    max-width: 87.5rem;
    width: 100%;
    margin: 0 auto;
    padding: var(--spacing-lg, 1.5rem);
    flex: 1;
}

/* Header & Navigation */
header {
    background: light-dark(
        linear-gradient(135deg, #fef3ff, #f0f9ff),
        linear-gradient(135deg, #1e1b4b, #312e81)
    );
    border: 3px solid;
    border-image: linear-gradient(90deg, var(--color-accent, #8b5cf6), var(--color-accent-2, #ec4899), var(--color-accent-3, #06b6d4)) 1;
    border-radius: 0;
    padding: var(--spacing-lg, 1.5rem);
    margin-bottom: var(--spacing-xl, 2rem);
    box-shadow: light-dark(
        0 8px 16px rgb(139 92 246 / 0.2),
        0 8px 16px rgb(0 0 0 / 0.5)
    );
    /* animation: slideDown 0.4s ease-out; */
    position: relative;
    /* Reserve space for theme toggle to prevent layout shift */
    min-height: 50px;

    & h1 {
        font-size: var(--font-size-3xl, 1.875rem);
        text-align: center;
        margin-bottom: var(--spacing-md, 1rem);
    }

    & nav {
        & ul {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: var(--spacing-md, 1rem);

            & li {
                & a {
                    display: inline-block;
                    padding: var(--spacing-sm, 0.5rem) var(--spacing-lg, 1.5rem);
                    border: 2px solid var(--color-accent, #8b5cf6);
                    background-color: light-dark(#fefefe, #1e1b4b);
                    color: var(--color-text, #0f172a);
                    font-weight: 600;
                    border-radius: 0;
                    transition: all var(--transition-base, 250ms);
                    transform: translate(0, 0);
                    box-shadow: 3px 3px 0 var(--color-accent-2, #ec4899);
                    text-transform: uppercase;
                    letter-spacing: 0.05em;

                    &:hover {
                        background: light-dark(
                            linear-gradient(135deg, #f3e8ff, #fce7f3),
                            linear-gradient(135deg, #3730a3, #4338ca)
                        );
                        border-color: var(--color-accent-2, #ec4899);
                        color: var(--color-accent, #8b5cf6);
                        transform: translate(-2px, -2px);
                        box-shadow: 5px 5px 0 var(--color-accent-3, #06b6d4);
                        text-decoration: none;
                    }

                    &:active {
                        transform: translate(1px, 1px);
                        box-shadow: 2px 2px 0 var(--color-accent-2, #ec4899);
                    }

                    &:focus-visible {
                        outline: 3px dotted var(--color-accent-3, #06b6d4);
                        outline-offset: 2px;
                    }
                }
            }
        }
    }
}

/* Navigation Active State */
nav a:has(strong) {
    background: light-dark(
        #dbeafe,
        linear-gradient(135deg, #6366f1, #ec4899)
    ) !important;
    border-color: var(--color-accent, #8b5cf6) !important;
    color: light-dark(var(--color-accent, #8b5cf6), #ffffff) !important;
    box-shadow: light-dark(
        0 4px 12px rgb(139 92 246 / 0.4),
        0 4px 12px rgb(0 0 0 / 0.6)
    );

    & strong {
        color: light-dark(var(--color-accent, #8b5cf6), #ffffff) !important;
    }

    &:hover {
        background: light-dark(
            linear-gradient(135deg, #f3e8ff, #fce7f3),
            linear-gradient(135deg, #818cf8, #f472b6)
        ) !important;
        border-color: var(--color-accent-2, #ec4899) !important;
        color: light-dark(var(--color-accent, #8b5cf6), #ffffff) !important;
        text-decoration: none;
        box-shadow: light-dark(
            0 6px 16px rgb(139 92 246 / 0.5),
            0 6px 16px rgb(0 0 0 / 0.7)
        );
    }
}

/* Sections & Cards */
section, article {
    background: light-dark(
        linear-gradient(135deg, #fff7ed, #fef3ff),
        linear-gradient(135deg, #1e1b4b, #312e81)
    );
    border: 3px solid var(--color-border, #8b5cf6);
    border-radius: 0;
    padding: var(--spacing-xl, 2rem);
    margin-bottom: var(--spacing-xl, 2rem);
    transition: all var(--transition-base, 250ms);
    box-shadow: 5px 5px 0 var(--color-accent-2, #ec4899);

    &:hover {
        box-shadow: 8px 8px 0 var(--color-accent-2, #ec4899);
        transform: translate(-2px, -2px);
        border-color: var(--color-accent-2, #ec4899);
    }

    & h2, & h3 {
        border-bottom: 3px dotted var(--color-accent, #8b5cf6);
        padding-bottom: var(--spacing-sm, 0.5rem);
        margin-bottom: var(--spacing-lg, 1.5rem);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
}

/* Section with form - */
section:has(form) {
    background: light-dark(#faf5ff, #2e1065);
    border-color: light-dark(var(--color-accent, #8b5cf6), #a78bfa);
    color-scheme: light dark;
}

/* Projects Grid */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl, 2rem);
    margin-bottom: var(--spacing-xl, 2rem);
}

/* Project Cards */
.project-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all var(--transition-base, 250ms);
    position: relative;
    overflow: visible;
    background: light-dark(
        linear-gradient(135deg, #f0f9ff, #fef3ff),
        linear-gradient(135deg, #312e81, #3730a3)
    ) !important;
    border-left: 5px solid var(--color-accent-3, #06b6d4) !important;
    border-top: 3px solid var(--color-accent, #8b5cf6) !important;
    border-right: 3px solid var(--color-accent-2, #ec4899) !important;
    border-bottom: 3px solid var(--color-accent-4, #10b981) !important;

    &::before {
        content: '⚡';
        position: absolute;
        top: -10px;
        right: 10px;
        font-size: 1.5rem;
        opacity: 0;
        transition: opacity var(--transition-base, 250ms);
    }

    &:hover {
        transform: translate(-3px, -3px);
        box-shadow: 10px 10px 0 var(--color-accent-5, #f59e0b);
        border-left-color: var(--color-accent-4, #10b981);
        border-top-color: var(--color-accent-2, #ec4899);
    }

    &::before {
        opacity: 1;
    }
}

/* Buttons */
button, .button {
    display: inline-block;
    padding: var(--spacing-sm, 0.5rem) var(--spacing-lg, 1.5rem);
    border: 3px solid var(--color-accent, #8b5cf6);
    background: light-dark(#ffffff, #1e1b4b); /* same base as header links */
    color: light-dark(#000000, #ffffff); /* black in light mode, white in dark mode */
    font-family: var(--font-primary, monospace);
    font-size: var(--font-size-base, 1rem);
    font-weight: 700;
    cursor: pointer;
    border-radius: 0;
    transition: all var(--transition-base, 250ms);
    transform: translate(0, 0);
    box-shadow: 4px 4px 0 var(--color-accent-5, #f59e0b);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
}

button:hover, .button:hover {
    background: light-dark(
        linear-gradient(135deg, #f3e8ff, #fce7f3),
        linear-gradient(135deg, #3730a3, #4338ca)
    );
    color: light-dark(#000000, #ffffff);
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--color-accent-5, #f59e0b);
}

button:active, .button:active {
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0 var(--color-accent-5, #f59e0b);
}

button:focus-visible, .button:focus-visible {
    outline: 3px dotted var(--color-accent-3, #06b6d4);
    outline-offset: 2px;
}

button:disabled, .button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(40%);
}

/* Forms */
form {
    & fieldset {
        border: 1px solid var(--color-border, #e5e7eb);
        padding: var(--spacing-lg, 1.5rem);
        margin-bottom: var(--spacing-md, 1rem);
        border-radius: var(--radius-md, 0.25rem);

        & legend {
            padding: 0 var(--spacing-sm, 0.5rem);
            font-weight: 600;
        }
    }

    & label {
        display: block;
        font-weight: 500;
        margin-bottom: var(--spacing-xs, 0.25rem);
        margin-top: var(--spacing-md, 1rem);
    }

    & input, & textarea {
        width: 100%;
        padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
        border: 2px solid var(--color-accent, #8b5cf6);
        border-radius: 0;
        font-family: var(--font-primary, monospace);
        font-size: var(--font-size-base, 1rem);
        background-color: light-dark(#fefefe, #1e1b4b);
        color: var(--color-text, #0f172a);
        transition: all var(--transition-fast, 150ms);
        box-shadow: 3px 3px 0 var(--color-accent-3, #06b6d4);

        &:focus {
            outline: 3px dotted var(--color-accent-2, #ec4899);
            outline-offset: 2px;
            border-color: var(--color-accent-2, #ec4899);
            background: light-dark(
                linear-gradient(135deg, #faf5ff, #fce7f3),
                linear-gradient(135deg, #3730a3, #4338ca)
            );
            box-shadow: 5px 5px 0 var(--color-accent-3, #06b6d4);
        }

        &:hover {
            border-color: var(--color-accent-2, #ec4899);
            transform: translate(-1px, -1px);
            box-shadow: 4px 4px 0 var(--color-accent-3, #06b6d4);
        }
    }

    & textarea {
        resize: vertical;
        min-height: 6.25rem;
    }
}

/* Progress Bars */
/* Per-field inline message styles for form fields */
.field-msg-wrap {
    min-height: 1.25rem; /* reserve space to avoid layout shift */
    margin-top: 0.25rem;
}
.field-msg {
    display: block;
    font-size: 0.95rem;
    line-height: 1.2;
    color: var(--color-text-muted, #64748b);
    transition: color var(--transition-fast, 150ms), opacity var(--transition-fast, 150ms);
    opacity: 1;
}
.field-error {
    color: light-dark(#b91c1c, #fecaca); /* red in light, pale red in dark */
    font-weight: 600;
}
.field-info {
    color: light-dark(#065f46, #bbf7d0); /* green-ish */
    font-weight: 600;
}

progress {
    width: 100%;
    height: 1.5rem;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-md, 0.25rem);
    appearance: none;
    -webkit-appearance: none;
    overflow: hidden;

    &::-webkit-progress-bar {
        background-color: var(--color-bg-alt, #f9fafb);
        border-radius: var(--radius-md, 0.25rem);
    }

    &::-webkit-progress-value {
        background: linear-gradient(90deg, var(--color-accent, #8b5cf6), var(--color-accent-2, #ec4899), var(--color-accent-3, #06b6d4));
        border-radius: var(--radius-md, 0.25rem);
        transition: width var(--transition-slow, 350ms);
    }

    &::-moz-progress-bar {
        background: linear-gradient(90deg, var(--color-accent, #8b5cf6), var(--color-accent-2, #ec4899), var(--color-accent-3, #06b6d4));
        border-radius: var(--radius-md, 0.25rem);
    }
}

section:has(progress) {
    & > div {
        margin-bottom: var(--spacing-md, 1rem);

        & p {
            margin-bottom: var(--spacing-sm, 0.5rem);
            font-weight: 500;
        }
    }
}

/* Images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

.profile-image-container {
    width: 100%;
    max-width: 12.5rem;
    height: 12.5rem;
    margin: 0 auto;
    overflow: hidden;
    border: 4px solid var(--color-accent, #8b5cf6);
    border-radius: 0;
    box-shadow: 8px 8px 0 var(--color-accent-2, #ec4899);
    transform: rotate(-2deg);
    transition: all var(--transition-base, 250ms);

    &:hover {
        transform: rotate(2deg);
        box-shadow: 10px 10px 0 var(--color-accent-3, #06b6d4);
    }

    & picture {
        width: 100%;
        height: 100%;
        display: block;

        & img.profile-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center top;
            border: none;
        }
    }
}

.project-image {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center center;
    border: 1px solid var(--color-border, #e5e7eb);
    margin-bottom: var(--spacing-md, 1rem);
    transition: transform var(--transition-base, 250ms);

    &:hover {
        transform: scale(1.02);
    }
}

.blog-thumbnail {
    width: 6rem;
    height: 6rem;
    object-fit: cover;
    object-position: center center;
    border: 1px solid var(--color-border, #e5e7eb);
}

img[loading="lazy"] {
    content-visibility: auto;
}

picture {
    display: block;

    & img {
        width: 100%;
    }
}

audio, video {
    width: 100%;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-md, 0.25rem);
}

canvas {
    display: block;
    border: 1px solid var(--color-border, #e5e7eb);
    max-width: 100%;
}

iframe {
    width: 100%;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-md, 0.25rem);
    display: block;
}

/* Theme Toggle Button */
/* Theme Picker Dropdown (supports multiple themes) */
.theme-picker {
    position: absolute;
    top: var(--spacing-md, 1rem);
    right: var(--spacing-md, 1rem);
    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
    border: 2px solid var(--color-accent, #8b5cf6);
    background-color: light-dark(#fefefe, #1e1b4b);
    color: var(--color-text, #0f172a);
    font-weight: 600;
    font-size: var(--font-size-sm, 0.875rem);
    font-family: var(--font-primary, 'JetBrains Mono', monospace);
    border-radius: 0;
    cursor: pointer;
    transition: all var(--transition-base, 250ms);
    transform: translate(0, 0);
    box-shadow: 3px 3px 0 var(--color-accent-2, #ec4899);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 10;
    min-width: 120px;
}

.theme-picker:hover {
    background: light-dark(
        linear-gradient(135deg, #f3e8ff, #fce7f3),
        linear-gradient(135deg, #3730a3, #4338ca)
    );
    border-color: var(--color-accent-2, #ec4899);
    color: var(--color-accent, #8b5cf6);
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--color-accent-3, #06b6d4);
}

.theme-picker:active {
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0 var(--color-accent-2, #ec4899);
}

.theme-picker:focus-visible {
    outline: 3px solid var(--color-accent-3, #06b6d4);
    outline-offset: 2px;
}

/* Style the dropdown options */
.theme-picker option {
    background-color: var(--color-bg, #fefefe);
    color: var(--color-text, #0f172a);
    padding: var(--spacing-sm, 0.5rem);
}

/* Footer */
footer {
    background: light-dark(
        linear-gradient(135deg, #f0f9ff, #fff7ed),
        linear-gradient(135deg, #1e1b4b, #312e81)
    );
    border: 3px dashed var(--color-accent-3, #06b6d4);
    border-radius: 0;
    padding: var(--spacing-lg, 1.5rem);
    margin-top: var(--spacing-2xl, 3rem);
    text-align: center;
    box-shadow: 0 -5px 0 var(--color-accent-4, #10b981);

    & nav {
        margin-bottom: var(--spacing-md, 1rem);

        & ul {
            list-style: none;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: var(--spacing-md, 1rem);

            & li {
                & a {
                    font-weight: 500;
                    padding: var(--spacing-xs, 0.25rem) var(--spacing-sm, 0.5rem);
                    border-radius: var(--radius-sm, 0.125rem);
                    transition: all var(--transition-fast, 150ms);

                    &:hover {
                        background: light-dark(
                            linear-gradient(135deg, #f3e8ff, #fce7f3),
                            linear-gradient(135deg, #3730a3, #4338ca)
                        );
                        color: var(--color-accent, #8b5cf6);
                        text-decoration: none;
                    }
                }
            }
        }
    }

    & p {
        margin: 0;
        font-size: var(--font-size-sm, 0.875rem);
        color: var(--color-text-muted, #737373);
    }
}

/* Animations */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-1.25rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

main {
    animation: fadeIn 0.6s ease-out;
}

/* Responsive Design - Mobile (<768px) */
@media (max-width: 47.9375rem) {
    :root {
        --font-size-4xl: 1.75rem;
        --font-size-3xl: 1.5rem;
        --font-size-2xl: 1.25rem;
    }

    body {
        padding: var(--spacing-sm, 0.5rem);
    }

    header {
        padding: var(--spacing-md, 1rem);

        & nav ul {
            flex-direction: column;
            gap: var(--spacing-xs, 0.25rem);

            & li {
                width: 100%;

                & a {
                    display: block;
                    text-align: center;
                    min-height: 2.75rem;
                }
            }
        }
    }

    main {
        padding: var(--spacing-md, 1rem);
        overflow-x: hidden;
    }

    section, article {
        padding: var(--spacing-md, 1rem);
        overflow-wrap: break-word;
    }

    .projects-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg, 1.5rem);
    }

    .profile-image-container {
        max-width: 9.375rem;
        height: 9.375rem;
    }

    .project-image {
        aspect-ratio: 16 / 9;
    }

    .blog-thumbnail {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    input, textarea, button, select {
        font-size: 1rem;
        min-height: 2.75rem;
    }

    button, input[type="submit"] {
        width: 100%;
    }

    footer {
        & nav ul {
            flex-direction: column;
            gap: var(--spacing-sm, 0.5rem);

            & li a {
                display: block;
                text-align: center;
            }
        }
    }
}

/* Tablet (768px - 1023px) */
@media (min-width: 48rem) and (max-width: 63.9375rem) {
    body {
        padding: var(--spacing-md, 1rem);
    }

    header {
        & nav ul {
            flex-wrap: wrap;
            gap: var(--spacing-sm, 0.5rem);
        }
    }

    main {
        max-width: 75rem;
        padding: var(--spacing-lg, 1.5rem);
    }

    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg, 1.5rem);
    }

    .profile-image-container {
        max-width: 11.25rem;
        height: 11.25rem;
    }

    .project-image {
        aspect-ratio: 4 / 3;
    }
}

/* Desktop (>= 1024px) */
@media (min-width: 64rem) {
    body {
        padding: var(--spacing-lg, 1.5rem);
    }

    main {
        padding: var(--spacing-xl, 2rem);
        max-width: 75rem;
        margin: 0 auto;
    }

    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xl, 2rem);
    }

    .profile-image-container {
        max-width: 12.5rem;
        height: 12.5rem;
    }

    .project-card:hover {
        transform: translateY(-0.5rem);
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Print */
@media print {
    body {
        background: white;
        color: black;
    }

    header, footer {
        border-color: black;
    }

    a {
        text-decoration: underline;
        color: black;
    }

    nav, button {
        display: none;
    }
}

/* Utility Classes */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.text-center {
    text-align: center;
}

.font-mono {
    font-family: var(--font-mono, monospace);
}

/* Contact form styles and improved validation UX (kept in CSS file) */

.contact-form fieldset {
    border: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.5rem;
}

.contact-form legend {
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.contact-form label {
    display: block; /* ensures label sits above control */
    font-weight: 600;
    color: var(--color-text, #0f172a);
}

.contact-form label > span[aria-hidden] {
    color: #b00020;
    margin-left: 0.25rem;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 2px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-md, 0.25rem);
    background: light-dark(#ffffff, #0b1220);
    color: var(--color-text, #0f172a);
    font-size: var(--font-size-base, 1rem);
    transition: box-shadow var(--transition-fast, 150ms), border-color var(--transition-fast, 150ms);
}

.contact-form textarea { min-height: 8rem; resize: vertical; }

/* focus and keyboard visible state */
.contact-form input:focus-visible, .contact-form textarea:focus-visible {
    outline: 3px solid var(--color-accent, #8b5cf6);
    outline-offset: 2px;
    border-color: var(--color-accent, #8b5cf6);
}

/* default neutral appearance for untouched controls (avoid showing invalid immediately) */
.contact-form input:placeholder-shown,
.contact-form input:placeholder-shown:invalid {
    box-shadow: none;
}

/* Show invalid only after focus or when user has typed (not placeholder-shown). For textarea, show on focus. */
.contact-form input:invalid:focus,
.contact-form input:invalid:not(:placeholder-shown),
.contact-form textarea:invalid:focus {
    border-color: #b00020;
    box-shadow: 0 0 0 4px rgba(176,0,32,0.08);
}

.contact-form input:valid:not(:placeholder-shown) {
    border-color: #16a34a;
    box-shadow: 0 0 0 4px rgba(16,163,127,0.08);
}

.output-error { color: #b00020; font-weight: 600; min-height: 1.25em; display:block; }
.output-info { color: #0366d6; min-height: 1.25em; display:block; }

/* Avoid layout shift by ensuring outputs keep space */
.output-error, .output-info { min-height: 1.25em; }

@media (max-width: 600px) {
    .contact-form { padding: var(--spacing-md, 1rem); margin: 0.5rem; }
}

/* JS-enhanced form visuals */
.flash {
    animation: flash-err 300ms ease-in-out;
}
@keyframes flash-err {
    0% { box-shadow: 0 0 0 6px rgba(176,0,32,0.22); }
    100% { box-shadow: none; }
}

.char-counter {
    font-size: 0.9rem;
    color: var(--color-text-muted, #64748b);
    text-align: right;
}
.char-counter.warning { color: #b00020; font-weight: 700; }

.temp-visible {
    opacity: 1;
    transition: opacity 0.4s ease-in-out;
}

/* ========================================
   View Transition API - MPA Transitions
   ======================================== */

/* Enable view transitions for same-origin navigation */
@view-transition {
    navigation: auto;
}

/* Root transition animation for page changes */
::view-transition-old(root) {
    animation: fade-out 0.4s ease-in-out;
}

::view-transition-new(root) {
    animation: fade-in 0.4s ease-in-out;
}

@keyframes fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
        /* transform: translateY(30px); */
    }
    to {
        opacity: 1;
        /* transform: translateY(0); */
    }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}