:root {
    --ink: #e9edf5;
    --muted: #a9b3c5;
    --paper: #111e35;
    --panel: #172946;
    --panel-solid: #1d3457;
    --nav: rgba(17, 30, 53, 0.94);
    --line: #6daedf;
    --blue: #9fd3f4;
    --blue-deep: #67aedd;
    --red: #ef4444;
    --red-text: #ff6060;
    --red-deep: #991b1b;
    /* Fixed, theme-independent solid-button backgrounds for white text (skip-link,
       icon-btn/contact-pill hover, logo, primary-action). --blue/--red are tuned to
       read as text/border color against each theme's own background, not as a
       background under white text, so they can't double as both (see A11Y-006). */
    --blue-solid: #0b5c9e;
    --red-solid: #a13000;
    --shadow: 8px 8px 0 rgba(4, 8, 15, 0.48);
}

[data-theme="light"] {
    --ink: #172033;
    --muted: #4d5b70;
    --paper: #a8d8f0;
    --panel: #d9effb;
    --panel-solid: #c5e6f7;
    --nav: rgba(168, 216, 240, 0.94);
    --line: #4f84ad;
    --blue: #063d7a;
    --blue-deep: #052d5a;
    --red: #b91c1c;
    --red-text: var(--red);
    --red-deep: #7f1d1d;
    --shadow: 6px 6px 0 rgba(35, 47, 67, 0.18);
}

[data-theme="colorblind"] {
    --ink: #101010;
    --muted: #272727;
    --paper: #ffffff;
    --panel: #ffffff;
    --panel-solid: #f5f5f5;
    --nav: rgba(255, 255, 255, 0.97);
    --line: #111111;
    --blue: #005ab5;
    --blue-deep: #003f7a;
    --red: #9c3900;
    --red-text: var(--red);
    --red-deep: #6b2600;
    --shadow: none;
}

[data-theme="colorblind"].dark-mode-colorblind {
    --ink: #ffffff;
    --muted: #e6e6e6;
    --paper: #121212;
    --panel: #1d1d1d;
    --panel-solid: #272727;
    --nav: rgba(18, 18, 18, 0.97);
    --line: #ffffff;
    --blue: #5aaaff;
    --blue-deep: #1c8dff;
    --red: #ffb000;
    --red-deep: #e08e00;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    min-width: 320px;
    color: var(--ink);
    background-color: var(--paper);
    background-image: linear-gradient(rgba(96, 165, 250, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(96, 165, 250, 0.045) 1px, transparent 1px);
    background-size: 24px 24px;
    font-family: "Space Grotesk", sans-serif;
    font-size: 1rem;
    line-height: 1.6;
}
h1, h2, h3, h4, .logo { font-family: "Space Grotesk", sans-serif; color: var(--ink); line-height: 1.08; }
a { color: inherit; }

.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 200; padding: .6rem 1rem; background: var(--blue-solid); color: #fff; font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 0; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.navbar { position: fixed; top: 0; width: 100%; z-index: 100; background: var(--nav); border-bottom: 2px solid var(--line); backdrop-filter: blur(10px); }
.nav-content { max-width: 1200px; min-height: 72px; padding: .75rem 2rem; margin: auto; display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; width: 42px; height: 42px; color: #fff; background: var(--red-solid); border: 3px solid var(--blue); box-shadow: 3px 3px 0 var(--blue-deep); justify-content: center; font-size: .93rem; font-weight: 700; letter-spacing: -.08em; text-decoration: none; }
.nav-right, .theme-controls, .nav-links { display: flex; align-items: center; }
.nav-right { gap: 1.25rem; }
.nav-links { gap: 1rem; list-style: none; }
.nav-links a { padding-bottom: 2px; color: var(--muted); font-size: .76rem; font-weight: 600; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; border-bottom: 2px solid transparent; }
.nav-links a:hover { color: var(--blue); }
.nav-links a.active { color: var(--blue); border-bottom-color: var(--red); }
.nav-resume-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; color: #fff; background: var(--red-solid); border: 1px solid var(--red); font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; transition: transform .15s ease, background .15s ease; }
.nav-resume-btn:hover { background: var(--blue-solid); border-color: var(--blue); transform: translate(-2px, -2px); }
.theme-controls { gap: .25rem; }
.icon-btn, .mobile-menu-btn { display: grid; place-items: center; width: 34px; height: 34px; color: var(--ink); background: transparent; border: 1px solid var(--line); cursor: pointer; }
.icon-btn:hover, .icon-btn.active { color: #fff; background: var(--blue-solid); border-color: var(--blue); }
.mobile-menu-btn { display: none; font-size: 1.1rem; }
.mobile-nav { position: fixed; top: 72px; left: 0; right: 0; z-index: 99; display: none; background: var(--panel); border-bottom: 2px solid var(--line); }
.mobile-nav.active { display: block; }
.mobile-nav-links { list-style: none; padding: .75rem 1.25rem; }
.mobile-nav-links a { display: block; padding: .75rem; color: var(--ink); text-decoration: none; text-transform: uppercase; border-left: 3px solid transparent; }
.mobile-link.active { color: var(--blue); border-left-color: var(--red); }
.mobile-resume-link { margin-top: .5rem; color: #fff; background: var(--red-solid); font-weight: 700; }

.container { max-width: 1200px; padding: 0 2rem; margin: auto; }
.hero { padding: 112px 0 2rem; }
.hero-content {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "eyebrow    photo"
        "heading    photo"
        "subtitle   photo"
        "tagline    photo"
        "supporting photo"
        "contact    photo";
    column-gap: 2.5rem;
    padding: 2.25rem;
    background: var(--panel);
    border: 2px solid var(--line);
    box-shadow: var(--shadow);
    overflow: visible;
}
.hero-content::before { content: "SOFTWARE // DEVOPS // AUTOMATION"; position: absolute; top: .65rem; right: .85rem; color: var(--muted); font-size: .63rem; letter-spacing: .12em; }
.hero-content::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 7px; background: linear-gradient(to right, var(--red) 0 42%, var(--blue) 42% 100%); }
.eyebrow, .timeline-date, .project-subtitle { color: var(--blue); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.hero-content .eyebrow { grid-area: eyebrow; }
.hero h1 { grid-area: heading; max-width: 800px; margin: .65rem 0; color: var(--ink); font-size: clamp(3rem, 6vw, 5.4rem); font-weight: 700; letter-spacing: -.075em; }
.subtitle { grid-area: subtitle; margin-bottom: 1rem; color: var(--red-text); font-size: clamp(1.15rem, 2vw, 1.7rem); font-weight: 600; }
.tagline { grid-area: tagline; max-width: 780px; margin-bottom: .85rem; color: var(--muted); font-size: .9rem; }
.tagline::before { content: "> "; color: var(--red); }
.tagline.terminal-type { white-space: normal; overflow: visible; font-family: "IBM Plex Mono", monospace; }
.tagline.terminal-type::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: .15em; background: var(--red); vertical-align: -0.15em; animation: terminal-caret .85s step-end infinite; }
@keyframes terminal-caret { 50% { opacity: 0; } }
.hero-supporting { grid-area: supporting; margin-bottom: 1.5rem; color: var(--blue); font-family: "IBM Plex Mono", monospace; font-size: .85rem; font-weight: 500; letter-spacing: .02em; }
.contact-info { grid-area: contact; display: flex; flex-wrap: wrap; gap: .65rem; align-self: start; }
.contact-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .75rem; color: var(--ink); border: 1px solid var(--line); background: var(--paper); font-size: .75rem; font-weight: 600; text-decoration: none; transition: transform .15s ease, background .15s ease; }
.contact-pill:hover { color: #fff; background: var(--blue-solid); border-color: var(--blue); transform: translate(-2px, -2px); }
.primary-action { color: #fff; background: var(--red-solid); border-color: var(--red); }
.profile-module {
    position: relative;
    display: block;
    grid-area: photo;
    align-self: center;
    justify-self: end;
    width: clamp(220px, 20vw, 260px);
    aspect-ratio: 1 / 1;
    min-width: 0;
}
.profile-module::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    width: 42px;
    height: 2px;
    background: var(--blue);
    pointer-events: none;
}
.profile-module::after {
    content: "";
    position: absolute;
    top: calc(50% - 4px);
    left: -49px;
    width: 8px;
    height: 8px;
    background: var(--red);
    pointer-events: none;
}
.profile-frame {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 5px;
    background: var(--blue);
    clip-path: polygon(0 22px, 22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}
.profile-frame::before {
    content: "";
    position: absolute;
    inset: 11px;
    border-top: 2px solid var(--red);
    border-left: 2px solid var(--red);
    pointer-events: none;
}
.profile-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    image-rendering: auto;
}

.section { padding: 4.25rem 0 0; scroll-margin-top: 90px; }
.section-title { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; color: var(--ink); font-size: clamp(1.55rem, 3vw, 2.25rem); letter-spacing: -.045em; }
.section-title::before { content: "//"; color: var(--red); font-family: "IBM Plex Mono", monospace; font-size: .7em; }
.section-title::after { content: ""; height: 2px; flex: 1; background: var(--line); }
.card { background: var(--panel); border: 2px solid var(--line); box-shadow: var(--shadow); }
#summary-target { padding: 1.7rem 2rem; color: var(--muted); font-size: 1.05rem; }
#summary-target p { max-width: 85ch; }
#summary-target p + p { margin-top: 1rem; }

.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 0; background: var(--line); border: 2px solid var(--line); box-shadow: var(--shadow); }
.stat-card { min-height: 132px; padding: 1.25rem; background: var(--panel-solid); }
.stat-card:nth-child(2) { border-bottom: 5px solid var(--red); }
.stat-card:nth-child(3) { border-bottom: 5px solid var(--blue); }
.stat-card strong { display: block; color: var(--ink); font-family: "Space Grotesk", sans-serif; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -.07em; }
.stat-card span { display: block; margin-top: .65rem; color: var(--muted); font-size: .72rem; line-height: 1.45; text-transform: uppercase; }

.skills-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
/* With an odd number of categories the final card would sit alone in a half-width
   cell; span it across both columns so the grid still reads as deliberate. */
.skills-grid > .skill-category:last-child:nth-child(odd) { grid-column: 1 / -1; }
.skill-category { padding: 1.4rem; }
.skill-icon { margin-bottom: .75rem; color: var(--red); font-size: 1.35rem; }
.skill-category h3 { margin-bottom: .65rem; font-size: 1.1rem; }
.skill-context { color: var(--muted); font-size: .85rem; margin-bottom: .85rem; }
.skill-tags { display: flex; flex-wrap: wrap; gap: .45rem; }
.skill-tags span { padding: .26rem .45rem; color: var(--muted); border: 1px solid var(--line); font-family: "IBM Plex Mono", monospace; font-size: .72rem; line-height: 1.3; overflow-wrap: anywhere; }
.earlier-experience { margin-top: 1.5rem; }
.earlier-experience > h3 { margin-bottom: 1rem; }
summary { cursor: pointer; color: var(--blue); padding: .55rem 0; font-weight: 600; }
.program-details { margin-top: 1rem; border-top: 1px solid var(--line); }
.program-details ul { margin-top: .75rem; }
.expertise-details { margin-top: 1.5rem; }
.expertise-details > summary { padding: 1rem; border: 1px solid var(--line); }
.expertise-details[open] .capability-stack { margin-top: 1rem; }

.timeline { position: relative; padding-left: 1.5rem; border-left: 2px solid var(--blue); }
.timeline-item { position: relative; margin-bottom: 1.25rem; padding: 1.6rem; }
.timeline-dot { position: absolute; top: 1.7rem; left: -1.5rem; width: 12px; height: 12px; background: var(--red); border: 2px solid var(--paper); transform: translateX(-50%); }
.timeline-date { margin-bottom: .5rem; }
.timeline-content h3 { margin-bottom: .25rem; font-size: 1.25rem; }
.timeline-content h4 { margin-bottom: 1rem; color: var(--muted); font-family: "IBM Plex Mono", monospace; font-size: .82rem; font-weight: 500; }
.timeline-content ul, .project-card ul { padding-left: 1.15rem; color: var(--muted); }
.timeline-content li, .project-card li { margin-bottom: .6rem; }
.timeline-content li::marker, .project-card li::marker { color: var(--red); }

.programs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.programs-grid:has(details[open]) { align-items: start; }
.program-card { padding: 1.5rem; display: flex; flex-direction: column; }
.program-card h3 { margin-bottom: .8rem; font-size: 1.15rem; }
.program-card > ul { flex: 1 1 auto; padding-left: 1.15rem; margin-bottom: 1rem; color: var(--muted); font-size: .95rem; }
.program-card li { margin-bottom: .5rem; }
.program-card li::marker { color: var(--red); }
.program-card .skill-tags { margin-top: auto; margin-bottom: 0; }
.program-card .program-details { margin-top: 1rem; }

.capability-stack { display: flex; flex-direction: column; align-items: center; gap: .6rem; max-width: 620px; margin: 0 auto; }
.capability-tier { width: 100%; padding: 1.1rem 1.5rem; background: var(--panel); border: 2px solid var(--line); box-shadow: var(--shadow); text-align: center; }
.capability-tier h3 { margin-bottom: .6rem; color: var(--blue); font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; }
.capability-tier .skill-tags { justify-content: center; }
.capability-arrow { color: var(--red); font-size: 1rem; }

.projects-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.project-card { padding: 1.5rem; display: flex; flex-direction: column; }
.project-card h3 { margin-bottom: .5rem; font-size: 1.2rem; }
.project-subtitle { margin-bottom: 1rem; font-size: .68rem; }
.project-card ul { margin-bottom: 1rem; font-size: .95rem; flex: 1; }
.project-card-footer { margin-top: 1rem; }

.cta-section { padding: 4.25rem 0 0; }
.cta-card { padding: 2.5rem 2rem; text-align: center; }
.cta-title { margin-bottom: .75rem; font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -.03em; }
.cta-copy { max-width: 640px; margin: 0 auto 1.75rem; color: var(--muted); font-size: .92rem; }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem; }

.additional-experience { border-top: 2px solid var(--line); }
.additional-item { display: grid; grid-template-columns: 1.2fr .8fr 1.8fr; gap: 1.2rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.additional-item h3 { font-size: 1rem; }
.additional-item p { color: var(--muted); font-size: .78rem; }
.additional-date { color: var(--blue) !important; }
.education-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.edu-card { display: flex; gap: 1rem; padding: 1.2rem; align-items: flex-start; }
.edu-icon { color: var(--red); font-size: 1.3rem; }
.edu-info h3 { font-size: .95rem; }
.edu-info p { margin-top: .3rem; color: var(--muted); font-size: .78rem; }
footer { padding: 3rem 2rem 2rem; margin-top: 4rem; color: var(--muted); border-top: 2px solid var(--line); font-size: .75rem; text-align: center; }
.last-synced { margin-top: .5rem; }
.last-synced a { color: var(--blue); }
.fade-in, .fade-in.visible { opacity: 1; transform: none; }

@media (max-width: 1000px) {
    .nav-links { display: none; }
    .mobile-menu-btn { display: grid; }
}
@media (max-width: 900px) {
    .hero-content {
        grid-template-columns: 1fr;
        grid-template-areas:
            "eyebrow"
            "heading"
            "subtitle"
            "tagline"
            "supporting"
            "photo"
            "contact";
        row-gap: .55rem;
    }
    .tagline.terminal-type { white-space: normal; }
    .profile-module {
        justify-self: start;
        align-self: auto;
        width: 150px;
    }
    .profile-module::before,
    .profile-module::after { display: none; }
    .projects-grid, .programs-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .container, .nav-content { padding-left: 1rem; padding-right: 1rem; }
    .nav-right { gap: .45rem; }
    .hero { padding-top: 105px; }
    .hero-content { padding: 1.5rem; }
    .hero-content::before { display: none; }
    .hero h1 { font-size: clamp(2.7rem, 14vw, 3.4rem); }
    .hero-content .subtitle, .hero-content .tagline, .hero-supporting { margin-bottom: .4rem; }
    .hero-content .contact-info { margin-top: .5rem; }
    .nav-resume-btn { padding: .5rem; }
    #summary-target { padding: 1.25rem; }
    .timeline { padding-left: 1rem; }
    .timeline-item { padding: 1.2rem; }
    .timeline-dot { left: -1rem; }
    .stat-card { min-height: 90px; display: grid; grid-template-columns: 85px 1fr; align-items: center; gap: 1rem; }
    .stat-card span { margin-top: 0; }
    .mobile-nav { max-height: calc(100dvh - 72px); overflow-y: auto; }
    .tagline.terminal-type { white-space: normal; }
    .stats-grid, .skills-grid, .education-grid, .programs-grid { grid-template-columns: 1fr; }
    .additional-item { grid-template-columns: 1fr; gap: .35rem; }
    .additional-summary { margin-top: .35rem; }
    .section, .cta-section { padding-top: 3.25rem; }
    .cta-card { padding: 1.75rem 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .fade-in { opacity: 1; transform: none; }
    .tagline.terminal-type::after { animation: none; }
}