/* ==========================================================================
   CAROLINE MEDINA — Portfolio Design System
   style.css
   
   TABLE OF CONTENTS
   1.  Custom Properties (Design Tokens)
   2.  Reset & Base
   3.  Typography Scale
   4.  Layout Utilities
   5.  Navigation
   6.  Hero Section
   7.  About Section
   8.  Featured Projects Section
   9.  Experience Section
   10. Technical Skills Section
   11. Research & Engineering Section
   12. Currently Building Section
   13. Contact Section
   14. Footer
   15. Shared Components (Cards, Tags, Buttons)
   16. Scroll Animations
   17. Responsive — Tablet (max 1024px)
   18. Responsive — Mobile (max 768px)
   19. Accessibility & Reduced Motion
   ========================================================================== */


/* ==========================================================================
   1. CUSTOM PROPERTIES (DESIGN TOKENS)
   All color, type, spacing, and timing decisions live here.
   To retheme the site, edit this section only.
   ========================================================================== */

:root {
    /* --- Color Palette --- */
    /* Backgrounds */
    --color-bg: #0d0f12; /* Page background — deep warm-dark, not pure black */
    --color-bg-surface: #13161b; /* Cards, nav background */
    --color-bg-raised: #1a1e25; /* Hover states, lifted elements */
    --color-bg-border: #252a33; /* Subtle borders and dividers */
    /* Text */
    --color-text-primary: #eaecf0; /* Main body text */
    --color-text-secondary: #8c95a6; /* Labels, captions, secondary content */
    --color-text-muted: #505a6b; /* Placeholder text, disabled states */
    /* Accent — Warm Sage Green */
    /* Chosen to feel grounded and human, not neon-cyberpunk. Reads as
     "researcher in a lab" rather than "defense contractor dashboard." */
    --color-accent: #5ec4a0; /* Primary accent — warm sage-teal */
    --color-accent-dim: #3a9478; /* Darker accent for hover states */
    --color-accent-glow: rgba(94, 196, 160, 0.12); /* Subtle accent glow */
    --color-accent-border: rgba(94, 196, 160, 0.25); /* Accent-tinted borders */
    /* Warm amber — used sparingly for "in development" / "coming soon" states */
    --color-warm: #e8a84c;
    --color-warm-dim: rgba(232, 168, 76, 0.15);
    /* --- Typography --- */
    /* Display: DM Sans — geometric warmth, confident but not aggressive.
     Chosen over Space Grotesk (too cold) and Inter (too neutral).
     Feels like a researcher who also writes well. */
    --font-display: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
    /* Body: Inter — reliable, highly readable at small sizes */
    --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    /* Mono: JetBrains Mono — for section labels, skill tags, code snippets */
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    /* Type Scale */
    --text-xs: 0.75rem; /* 12px — micro labels */
    --text-sm: 0.875rem; /* 14px — captions, tags */
    --text-base: 1rem; /* 16px — body */
    --text-lg: 1.125rem; /* 18px — lead text */
    --text-xl: 1.25rem; /* 20px — card titles */
    --text-2xl: 1.5rem; /* 24px — section subtitles */
    --text-3xl: 2rem; /* 32px — section headings */
    --text-4xl: 2.75rem; /* 44px — hero subtitle */
    --text-hero: clamp(3rem, 7vw, 5.5rem); /* Fluid hero name */
    /* Line heights */
    --leading-tight: 1.2;
    --leading-snug: 1.35;
    --leading-normal: 1.6;
    --leading-loose: 1.75;
    /* Letter spacing */
    --tracking-tight: -0.03em;
    --tracking-normal: 0em;
    --tracking-wide: 0.06em;
    --tracking-wider: 0.12em;
    /* Font weights */
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    /* --- Spacing Scale --- */
    --space-1: 0.25rem; /*  4px */
    --space-2: 0.5rem; /*  8px */
    --space-3: 0.75rem; /* 12px */
    --space-4: 1rem; /* 16px */
    --space-5: 1.25rem; /* 20px */
    --space-6: 1.5rem; /* 24px */
    --space-8: 2rem; /* 32px */
    --space-10: 2.5rem; /* 40px */
    --space-12: 3rem; /* 48px */
    --space-16: 4rem; /* 64px */
    --space-20: 5rem; /* 80px */
    --space-24: 6rem; /* 96px */
    --space-32: 8rem; /* 128px */
    /* --- Layout --- */
    --container-max: 1140px;
    --container-wide: 1320px;
    --container-narrow: 720px;
    --container-pad: clamp(1.25rem, 5vw, 2.5rem);
    /* --- Borders & Radius --- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    --border-subtle: 1px solid var(--color-bg-border);
    --border-accent: 1px solid var(--color-accent-border);
    /* --- Shadows --- */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.35);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.45);
    --shadow-card: 0 2px 12px rgba(0,0,0,0.25);
    --shadow-card-hover: 0 4px 16px rgba(0,0,0,0.3);
    /* --- Transitions --- */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
    --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
    /* --- Z-index Layers --- */
    --z-base: 1;
    --z-raised: 10;
    --z-nav: 100;
    --z-overlay: 200;
}


/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

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

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

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-normal);
    line-height: var(--leading-normal);
    color: var(--color-text-primary);
    background-color: var(--color-bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

input,
textarea {
    font-family: inherit;
    font-size: inherit;
}

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

::selection {
    background-color: var(--color-accent);
    color: var(--color-bg);
}

/* Scrollbar (Webkit) */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--color-bg-border);
    border-radius: var(--radius-full);
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--color-text-muted);
    }


/* ==========================================================================
   3. TYPOGRAPHY SCALE
   ========================================================================== */

/* Section eyebrow label — monospace, small caps feel */
.label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-accent);
}

/* Section heading */
.section-heading {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text-primary);
}

/* Lead paragraph */
.lead {
    font-size: var(--text-lg);
    line-height: var(--leading-loose);
    color: var(--color-text-secondary);
}

/* Body text default */
p {
    line-height: var(--leading-normal);
    color: var(--color-text-secondary);
}

/* Strong inline */
strong {
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
}

/* Monospace inline */
code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    color: var(--color-accent);
    background: var(--color-accent-glow);
    padding: 0.1em 0.4em;
    border-radius: var(--radius-sm);
}

/* Accent-colored text */
.text-accent {
    color: var(--color-accent);
}

.text-secondary {
    color: var(--color-text-secondary);
}

.text-muted {
    color: var(--color-text-muted);
}


/* ==========================================================================
   4. LAYOUT UTILITIES
   ========================================================================== */

/* Main content container */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.container--wide {
    max-width: var(--container-wide);
}

.container--narrow {
    max-width: var(--container-narrow);
}

/* Section spacing */
.section {
    padding-block: var(--space-24);
}

.section--lg {
    padding-block: var(--space-32);
}

/* Section header — label + heading + optional lead */
.section-header {
    margin-bottom: var(--space-12);
}

    .section-header .label {
        display: block;
        margin-bottom: var(--space-3);
    }

    .section-header .lead {
        margin-top: var(--space-4);
        max-width: 56ch;
    }

/* Horizontal divider */
.divider {
    border: none;
    border-top: var(--border-subtle);
    margin: 0;
}

/* Vertical spacer */
.spacer-sm {
    height: var(--space-4);
}

.spacer-md {
    height: var(--space-8);
}

.spacer-lg {
    height: var(--space-12);
}

/* Flex utilities */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

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

.items-start {
    align-items: flex-start;
}

.justify-between {
    justify-content: space-between;
}

.gap-2 {
    gap: var(--space-2);
}

.gap-3 {
    gap: var(--space-3);
}

.gap-4 {
    gap: var(--space-4);
}

.gap-6 {
    gap: var(--space-6);
}

.gap-8 {
    gap: var(--space-8);
}

/* Grid utilities */
.grid {
    display: grid;
}


/* ==========================================================================
   5. NAVIGATION
   ========================================================================== */

.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-nav);
    padding-block: var(--space-5);
    transition: padding var(--transition-base), background var(--transition-base), backdrop-filter var(--transition-base), border-color var(--transition-base);
    border-bottom: 1px solid transparent;
}

/* Nav scrolled state — JS adds .nav--scrolled to <nav> on scroll */
.nav--scrolled {
    padding-block: var(--space-3);
    background: rgba(13, 15, 18, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom-color: var(--color-bg-border);
}

.nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

/* Wordmark / logo */
.nav__wordmark {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    letter-spacing: var(--tracking-tight);
    transition: color var(--transition-fast);
}

    .nav__wordmark:hover {
        color: var(--color-accent);
    }

/* Desktop links */
.nav__links {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.nav__link {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
    letter-spacing: var(--tracking-wide);
    transition: color var(--transition-fast);
    position: relative;
}

    .nav__link::after {
        content: '';
        position: absolute;
        bottom: -3px;
        left: 0;
        width: 0;
        height: 1px;
        background: var(--color-accent);
        transition: width var(--transition-base);
    }

    .nav__link:hover {
        color: var(--color-text-primary);
    }

        .nav__link:hover::after {
            width: 100%;
        }

/* Mobile menu toggle — hidden on desktop */
.nav__toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: var(--space-2);
    cursor: pointer;
}

    .nav__toggle span {
        display: block;
        width: 22px;
        height: 2px;
        background: var(--color-text-secondary);
        border-radius: var(--radius-full);
        transition: transform var(--transition-base), opacity var(--transition-fast);
    }

    /* Mobile menu open state */
    .nav__toggle.is-open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .nav__toggle.is-open span:nth-child(2) {
        opacity: 0;
    }

    .nav__toggle.is-open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

/* Mobile menu drawer */
.nav__mobile {
    display: none;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4) var(--container-pad) var(--space-6);
    background: rgba(13, 15, 18, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: var(--border-subtle);
}

    .nav__mobile.is-open {
        display: flex;
    }

.nav__mobile-link {
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
    padding-block: var(--space-3);
    border-bottom: var(--border-subtle);
    transition: color var(--transition-fast);
}

    .nav__mobile-link:last-child {
        border-bottom: none;
    }

    .nav__mobile-link:hover {
        color: var(--color-accent);
    }


/* ==========================================================================
   6. HERO SECTION
   ========================================================================== */

.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding-top: 80px; /* nav height offset */
    overflow: hidden;
}

/* Hero has no decorative background — the content and image carry the weight */

.hero__inner {
    position: relative;
    z-index: var(--z-base);
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
    padding-block: var(--space-16);
}

/* Two-column layout: content left, image slot right */
.hero__layout {
    display: grid;
    grid-template-columns: 1fr 420px;
    align-items: center;
    gap: var(--space-16);
}

/* Left: text content */
.hero__content {
}

.hero__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.hero__eyebrow-dot {
    width: 6px;
    height: 6px;
    background: var(--color-accent);
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

/* The signature element: the name renders as the dominant visual on the page.
   Each character carries visual weight — this is the one big swing. */
.hero__name {
    font-family: var(--font-display);
    font-size: var(--text-hero);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text-primary);
    margin-bottom: var(--space-5);
}

/* The discipline tags beneath the name */
.hero__disciplines {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-wide);
    color: var(--color-accent);
    margin-bottom: var(--space-8);
}

    .hero__disciplines span {
        color: var(--color-text-muted);
        margin-inline: var(--space-2);
    }

/* Supporting statement */
.hero__statement {
    font-size: var(--text-lg);
    line-height: var(--leading-loose);
    color: var(--color-text-secondary);
    max-width: 50ch;
    margin-bottom: var(--space-10);
}

/* CTA button row */
.hero__cta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
}

/* Right: image slot */
.hero__image-slot {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--color-bg-surface);
    border: var(--border-subtle);
}

    /* When image is present, it fills this slot */
    .hero__image-slot img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }

/* Placeholder state — shown when image is not yet added */
.hero__image-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    color: var(--color-text-muted);
    text-align: center;
    padding: var(--space-8);
}

    .hero__image-placeholder svg {
        opacity: 0.3;
    }

    .hero__image-placeholder p {
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        letter-spacing: var(--tracking-wide);
        color: var(--color-text-muted);
    }

/* No decorative corner brackets — image stands on its own */

/* Scroll hint removed — animated arrow gimmick */


/* ==========================================================================
   7. ABOUT SECTION
   ========================================================================== */

.about {
    background: var(--color-bg);
    border-top: var(--border-subtle);
}

.about__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: start;
}

.about__bio {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

    .about__bio p {
        font-size: var(--text-base);
        line-height: var(--leading-loose);
    }

/* Education card */
.education-card {
    background: var(--color-bg-surface);
    border: var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-top: var(--space-6);
    position: relative;
    overflow: hidden;
}

/* No left-border stripe on education card */

.education-card__institution {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.education-card__degree {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
}

.education-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.education-card__stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.education-card__stat-value {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-accent);
    line-height: 1;
}

.education-card__stat-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* Interests / focus areas */
.about__interests {
}

.about__interests-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.interest-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-bg-surface);
    border: var(--border-subtle);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-base), background var(--transition-base);
}

    .interest-item:hover {
        border-color: var(--color-accent-border);
        background: var(--color-bg-raised);
    }

.interest-item__icon {
    font-size: 1.25rem;
    flex-shrink: 0;
    line-height: 1;
}

.interest-item__label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
}


/* ==========================================================================
   8. FEATURED PROJECTS SECTION
   ========================================================================== */

.projects {
    background: var(--color-bg-surface);
    border-top: var(--border-subtle);
}

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

/* Featured (larger) card — spans full width */
.project-card--featured {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    min-height: 380px;
}

/* Standard card */
.project-card {
    background: var(--color-bg);
    border: var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
    display: flex;
    flex-direction: column;
}

    .project-card:hover {
        box-shadow: var(--shadow-card-hover);
        border-color: var(--color-accent-border);
    }

/* Featured card image panel */
.project-card--featured .project-card__image {
    border-radius: 0;
    border-right: var(--border-subtle);
    min-height: 300px;
}

.project-card__image {
    position: relative;
    background: var(--color-bg-raised);
    aspect-ratio: 16 / 9;
    overflow: hidden;
    flex-shrink: 0;
}

    .project-card__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: transform var(--transition-slow);
    }

        /* Logo images — contain so they don't get cropped */
        .project-card__image img.is-logo {
            object-fit: contain;
            padding: 1.5rem;
            background: var(--color-bg-raised);
        }

.project-card:hover .project-card__image img {
    transform: scale(1.03);
}

/* Image placeholder */
.project-card__image-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

    .project-card__image-placeholder span {
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        color: var(--color-text-muted);
        letter-spacing: var(--tracking-wide);
    }

/* Card body */
.project-card__body {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.project-card--featured .project-card__body {
    padding: var(--space-8) var(--space-8);
    justify-content: center;
}

.project-card__label {
    margin-bottom: var(--space-3);
}

.project-card__status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    margin-bottom: var(--space-3);
}

.project-card__status--active::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-accent);
    flex-shrink: 0;
}

.project-card__status--dev::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-warm);
    flex-shrink: 0;
}

.project-card__status--active {
    color: var(--color-accent);
}

.project-card__status--dev {
    color: var(--color-warm);
}

.project-card__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-3);
    line-height: var(--leading-snug);
}

.project-card--featured .project-card__title {
    font-size: var(--text-2xl);
}

.project-card__description {
    font-size: var(--text-sm);
    line-height: var(--leading-loose);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-5);
    flex: 1;
}

.project-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

.project-card__links {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: auto;
    flex-wrap: wrap;
}

/* Small creative project row */
.projects__secondary {
    margin-top: var(--space-6);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.project-mini {
    background: var(--color-bg);
    border: var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    transition: border-color var(--transition-base), background var(--transition-base);
}

    .project-mini:hover {
        border-color: var(--color-accent-border);
        background: var(--color-bg-raised);
    }

.project-mini__title {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
}

.project-mini__desc {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-snug);
}


/* ==========================================================================
   9. EXPERIENCE SECTION
   ========================================================================== */

.experience {
    background: var(--color-bg);
    border-top: var(--border-subtle);
}

/* Vertical timeline */
.timeline {
    position: relative;
    padding-left: var(--space-8);
}

    /* The vertical rule */
    .timeline::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 0;
        width: 1px;
        height: calc(100% - 8px);
        background: var(--color-bg-border);
    }

.timeline__item {
    position: relative;
    padding-bottom: var(--space-12);
}

    .timeline__item:last-child {
        padding-bottom: 0;
    }

    /* Timeline dot */
    .timeline__item::before {
        content: '';
        position: absolute;
        left: calc(-1 * var(--space-8) - 4px);
        top: 6px;
        width: 9px;
        height: 9px;
        border-radius: var(--radius-full);
        background: var(--color-accent);
        border: 2px solid var(--color-bg);
        box-shadow: 0 0 0 1px var(--color-accent);
    }

.timeline__item--past::before {
    background: var(--color-bg-border);
    box-shadow: 0 0 0 1px var(--color-bg-border);
}

.timeline__meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.timeline__date {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    color: var(--color-accent);
    text-transform: uppercase;
}

.timeline__item--past .timeline__date {
    color: var(--color-text-muted);
}

.timeline__role {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
    margin-bottom: var(--space-1);
}

.timeline__org {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.timeline__responsibilities {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.timeline__responsibility {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    font-size: var(--text-sm);
    line-height: var(--leading-loose);
    color: var(--color-text-secondary);
}

    .timeline__responsibility::before {
        content: '–';
        color: var(--color-accent);
        flex-shrink: 0;
        font-family: var(--font-mono);
    }

.timeline__tech {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}


/* ==========================================================================
   10. TECHNICAL SKILLS SECTION
   ========================================================================== */

.skills {
    background: var(--color-bg-surface);
    border-top: var(--border-subtle);
}

.skills__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);
}

.skill-group {
    background: var(--color-bg);
    border: var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    transition: border-color var(--transition-base);
}

    .skill-group:hover {
        border-color: var(--color-accent-border);
    }

.skill-group__title {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-4);
}

.skill-group__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}


/* ==========================================================================
   11. RESEARCH & ENGINEERING SECTION
   ========================================================================== */

.research {
    background: var(--color-bg);
    border-top: var(--border-subtle);
}

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

.research-item {
    background: var(--color-bg-surface);
    border: var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

    .research-item:hover {
        border-color: var(--color-accent-border);
        box-shadow: var(--shadow-card);
    }

.research-item__date {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.research-item__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    line-height: var(--leading-snug);
}

.research-item__org {
    font-size: var(--text-sm);
    color: var(--color-accent);
    font-weight: var(--weight-medium);
}

.research-item__description {
    font-size: var(--text-sm);
    line-height: var(--leading-loose);
    color: var(--color-text-secondary);
}


/* ==========================================================================
   12. CURRENTLY BUILDING SECTION
   ========================================================================== */

.building {
    background: var(--color-bg-surface);
    border-top: var(--border-subtle);
}

.building__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-4);
}

.building-item {
    background: var(--color-bg);
    border: var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: border-color var(--transition-base);
}

    .building-item:hover {
        border-color: var(--color-accent-border);
    }

.building-item__icon {
    font-size: 1.5rem;
    line-height: 1;
}

.building-item__title {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
}

.building-item__desc {
    font-size: var(--text-sm);
    line-height: var(--leading-loose);
    color: var(--color-text-secondary);
}

.building-item__badge {
    align-self: flex-start;
    margin-top: auto;
    padding-top: var(--space-2);
}


/* ==========================================================================
   13. CONTACT SECTION
   ========================================================================== */

.contact {
    background: var(--color-bg);
    border-top: var(--border-subtle);
}

.contact__inner {
    max-width: var(--container-narrow);
    text-align: center;
}

.contact__heading {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
}

.contact__subtext {
    font-size: var(--text-lg);
    line-height: var(--leading-loose);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-8);
    max-width: 46ch;
    margin-inline: auto;
}

.contact__links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-4);
}


/* ==========================================================================
   14. FOOTER
   ========================================================================== */

.footer {
    background: var(--color-bg-surface);
    border-top: var(--border-subtle);
    padding-block: var(--space-8);
}

.footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.footer__copy {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

    .footer__copy strong {
        color: var(--color-text-secondary);
        font-weight: var(--weight-medium);
    }

.footer__hosting {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
}

.footer__hosting-dot {
    width: 5px;
    height: 5px;
    background: var(--color-accent);
    border-radius: var(--radius-full);
}


/* ==========================================================================
   15. SHARED COMPONENTS — Buttons, Tags, Links
   ========================================================================== */

/* --- Buttons --- */

/* Base button styles */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.01em;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
}

    .btn:hover {
        transform: translateY(-1px);
    }

    .btn:active {
        transform: translateY(0);
    }

/* Primary — filled accent */
.btn--primary {
    background: var(--color-accent);
    color: var(--color-bg);
    border-color: var(--color-accent);
}

    .btn--primary:hover {
        background: var(--color-accent-dim);
        border-color: var(--color-accent-dim);
    }

/* Secondary — outlined */
.btn--secondary {
    background: transparent;
    color: var(--color-text-secondary);
    border-color: var(--color-bg-border);
}

    .btn--secondary:hover {
        color: var(--color-text-primary);
        border-color: var(--color-text-muted);
        background: var(--color-bg-raised);
    }

/* Ghost — minimal, text-link feel */
.btn--ghost {
    background: transparent;
    color: var(--color-accent);
    padding-inline: 0;
    border-color: transparent;
}

    .btn--ghost::after {
        content: '→';
        transition: transform var(--transition-fast);
    }

    .btn--ghost:hover {
        color: var(--color-accent-dim);
        transform: none;
    }

        .btn--ghost:hover::after {
            transform: translateX(3px);
        }

/* Small size modifier */
.btn--sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
}

/* --- Skill / Technology Tags --- */

.tag {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    background: var(--color-bg-raised);
    border: var(--border-subtle);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.02em;
    color: var(--color-text-secondary);
    white-space: nowrap;
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

    .tag:hover {
        color: var(--color-accent);
        border-color: var(--color-accent-border);
        background: var(--color-accent-glow);
    }

/* Accent-tinted tag variant */
.tag--accent {
    background: var(--color-accent-glow);
    border-color: var(--color-accent-border);
    color: var(--color-accent);
}

/* Warm/dev tag variant */
.tag--warm {
    background: var(--color-warm-dim);
    border-color: rgba(232, 168, 76, 0.3);
    color: var(--color-warm);
}

/* --- Inline link --- */
.link {
    color: var(--color-accent);
    text-decoration: none;
    border-bottom: 1px solid var(--color-accent-border);
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

    .link:hover {
        color: var(--color-text-primary);
        border-bottom-color: var(--color-text-primary);
    }

/* --- Status badge --- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    font-weight: var(--weight-medium);
}

.badge--active {
    background: var(--color-accent-glow);
    border: 1px solid var(--color-accent-border);
    color: var(--color-accent);
}

    .badge--active::before {
        content: '';
        width: 5px;
        height: 5px;
        border-radius: var(--radius-full);
        background: currentColor;
    }

.badge--dev {
    background: var(--color-warm-dim);
    border: 1px solid rgba(232, 168, 76, 0.3);
    color: var(--color-warm);
}

    .badge--dev::before {
        content: '';
        width: 5px;
        height: 5px;
        border-radius: var(--radius-full);
        background: currentColor;
    }

.badge--planned {
    background: rgba(140, 149, 166, 0.1);
    border: 1px solid rgba(140, 149, 166, 0.2);
    color: var(--color-text-muted);
}


/* ==========================================================================
   16. SCROLL ANIMATIONS
   JS in main.js adds .is-visible when element enters viewport.
   CSS handles the transition. No library needed.
   ========================================================================== */

/* Elements that will animate in */
[data-animate] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
}

/* Slight delay variation for staggered children */
[data-animate-delay="1"] {
    transition-delay: 80ms;
}

[data-animate-delay="2"] {
    transition-delay: 160ms;
}

[data-animate-delay="3"] {
    transition-delay: 240ms;
}

[data-animate-delay="4"] {
    transition-delay: 320ms;
}

[data-animate-delay="5"] {
    transition-delay: 400ms;
}

/* Visible state */
[data-animate].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hero content doesn't wait for scroll */
.hero [data-animate] {
    animation: heroFadeUp var(--transition-slow) forwards;
}

.hero [data-animate-delay="1"] {
    animation-delay: 100ms;
}

.hero [data-animate-delay="2"] {
    animation-delay: 200ms;
}

.hero [data-animate-delay="3"] {
    animation-delay: 350ms;
}

.hero [data-animate-delay="4"] {
    animation-delay: 500ms;
}

@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==========================================================================
   17. RESPONSIVE — TABLET (max-width: 1024px)
   ========================================================================== */

@media (max-width: 1024px) {

    /* Hero: stack on tablet if image would be too small */
    .hero__layout {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }

    .hero__image-slot {
        max-width: 480px;
        aspect-ratio: 4 / 3;
    }

    /* About */
    .about__layout {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }

    /* Projects: featured card stacks */
    .project-card--featured {
        grid-template-columns: 1fr;
        min-height: unset;
    }

        .project-card--featured .project-card__image {
            border-right: none;
            border-bottom: var(--border-subtle);
            min-height: 240px;
            aspect-ratio: 16 / 7;
        }

    /* Research */
    .research__layout {
        grid-template-columns: 1fr;
    }

    /* Secondary projects */
    .projects__secondary {
        grid-template-columns: 1fr 1fr;
    }
}


/* ==========================================================================
   18. RESPONSIVE — MOBILE (max-width: 768px)
   ========================================================================== */

@media (max-width: 768px) {

    /* Nav: hide desktop links, show toggle */
    .nav__links {
        display: none;
    }

    .nav__toggle {
        display: flex;
    }

    /* Hero */
    .hero {
        min-height: auto;
        padding-bottom: var(--space-16);
    }

    .hero__image-slot {
        display: block;
        max-width: 100%;
        aspect-ratio: 3 / 2;
    }

    /* Section spacing */
    .section {
        padding-block: var(--space-16);
    }

    .section--lg {
        padding-block: var(--space-20);
    }

    /* Section heading */
    .section-heading {
        font-size: var(--text-2xl);
    }

    /* Projects */
    .projects__grid {
        grid-template-columns: 1fr;
    }

    .project-card--featured {
        grid-column: auto;
        grid-template-columns: 1fr; /* collapse internal two-column layout */
    }

        .project-card--featured .project-card__image {
            border-right: none;
            border-bottom: var(--border-subtle);
            min-height: 220px;
            aspect-ratio: 16 / 9;
        }

        .project-card--featured .project-card__body {
            padding: var(--space-6);
        }

    .projects__secondary {
        grid-template-columns: 1fr;
    }

    /* About interests — keep 2 columns on mobile, plain text labels fit fine */

    /* Skills */
    .skills__grid {
        grid-template-columns: 1fr;
    }

    /* Building */
    .building__grid {
        grid-template-columns: 1fr;
    }

    /* Timeline */
    .timeline {
        padding-left: var(--space-6);
    }

    /* Contact */
    .contact__links {
        flex-direction: column;
        align-items: stretch;
    }

        .contact__links .btn {
            justify-content: center;
        }

    /* Footer */
    .footer__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    /* CTA buttons */
    .hero__cta {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {

    .hero__name {
        font-size: clamp(2.5rem, 12vw, 3.5rem);
    }
}


/* ==========================================================================
   19. ACCESSIBILITY & REDUCED MOTION
   ========================================================================== */

/* Respect system preference for reduced motion */
@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;
    }

    [data-animate] {
        opacity: 1;
        transform: none;
    }

    .hero [data-animate] {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .hero__scroll-line {
        animation: none;
    }

    .project-card:hover {
        transform: none;
    }

    .btn:hover {
        transform: none;
    }

    .building-item:hover {
        transform: none;
    }
}

/* High contrast mode adjustments */
@media (forced-colors: active) {
    .btn--primary {
        border: 2px solid ButtonText;
    }

    .tag,
    .badge {
        border: 1px solid ButtonText;
    }
}

/* Skip-to-content link (hidden until focused) */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    z-index: calc(var(--z-nav) + 1);
    padding: var(--space-3) var(--space-6);
    background: var(--color-accent);
    color: var(--color-bg);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    transition: top var(--transition-fast);
    text-decoration: none;
}

    .skip-link:focus {
        top: 0;
    }