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

/* ── TOKENS ── */
:root {
    --ink: #0f0f0f;
    --ink-mid: #444;
    --ink-muted: #888;
    --surface: #fafaf8;
    --card: #fff;
    --rule: #e4e4e0;
    --accent: #2563eb;
    --accent-light: #eff6ff;
    --tag-bg: #f0f0ec;
    --ph: #f2c708;
    --kr: #09397c;
    --serif: 'DM Serif Display', Georgia, serif;
    --sans: 'Inter', system-ui, sans-serif;
}

/* ── BASE ── */
html {
    font-size: 16px;
    scroll-behavior: smooth
}

body {
    background: var(--surface);
    color: var(--ink);
    font-family: var(--sans);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased
}

/* ── NAV ── */
nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(250, 250, 248, .93);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--rule);
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px
}

.nav-logo {
    font-family: var(--serif);
    font-size: 1.1rem;
    color: var(--ink);
    text-decoration: none
}

.nav-links {
    display: flex;
    gap: 2rem;
    list-style: none
}

.nav-links a {
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-muted);
    text-decoration: none;
    transition: color .2s
}

.nav-links a:hover {
    color: var(--ink)
}

/* ── HERO ── */
.hero {
    max-width: 860px;
    margin: 0 auto;
    padding: 5rem 2rem 3rem;
    border-bottom: 1px solid var(--rule)
}

.hero-inner {
    display: flex;
    align-items: flex-start;
    gap: 2.5rem
}

.hero-photo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--rule);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: .5rem;
    overflow: hidden
}

.hero-photo svg {
    width: 60px;
    height: 60px;
    color: var(--ink-muted)
}

h1 {
    font-family: var(--serif);
    font-size: clamp(2.5rem, 6vw, 4rem);
    line-height: 1.1;
    letter-spacing: -.01em;
    margin-bottom: 1rem
}

h1 em {
    font-style: italic;
    color: var(--ink-muted)
}

.hero-bio {
    font-size: 1.05rem;
    color: var(--ink-mid);
    max-width: 600px;
    margin-bottom: 2rem
}

.hero-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: .82rem;
    color: var(--ink-muted)
}

.hero-contact a {
    color: var(--ink-muted);
    text-decoration: none;
    transition: color .2s
}

.hero-contact a:hover {
    color: var(--accent)
}

/* ── AVAILABILITY ── */
.avail-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .75rem;
    font-weight: 600;
    color: #166534;
    background: #dcfce7;
    padding: .3rem .75rem;
    border-radius: 999px;
    margin-bottom: 1rem
}

.avail-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
    animation: pulse 2s infinite
}

@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, .4)
    }

    50% {
        box-shadow: 0 0 0 5px rgba(34, 197, 94, 0)
    }
}

/* ── TERMINAL HINT ── */
.hero-terminal-hint {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-top: 1rem;
    font-family: 'Fira Mono', 'Cascadia Code', 'Courier New', monospace;
    font-size: .82rem;
    color: #a9b1d6;
    background: #1a1b26;
    border: 1px solid #2a2b3d;
    border-radius: 7px;
    padding: .55rem 1rem;
    cursor: pointer;
    transition: all .2s;
    letter-spacing: .01em;
    width: fit-content
}

.hero-terminal-hint:hover {
    background: #1f2035;
    border-color: #414868;
    color: #c0caf5
}

.hero-terminal-icon {
    color: #7aa2f7;
    font-size: .95rem;
    font-weight: 700
}

.hero-terminal-hint kbd {
    font-family: inherit;
    font-size: .72rem;
    color: #565f89;
    background: #16172a;
    border: 1px solid #2a2b3d;
    border-radius: 3px;
    padding: .1rem .4rem
}

.term-cursor {
    color: #7aa2f7;
    animation: blink 1s step-end infinite
}

@keyframes blink {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: 0
    }
}

/* ── METRICS ── */
.metrics-grid {
    max-width: 860px;
    margin: 0 auto;
    padding: 3rem 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0;
    border-bottom: 1px solid var(--rule)
}

.metric {
    padding: 1.5rem;
    border-right: 1px solid var(--rule)
}

.metric:last-child {
    border-right: none
}

.metric-value {
    font-family: var(--serif);
    font-size: 2.4rem;
    line-height: 1;
    color: var(--ink);
    margin-bottom: .35rem
}

.metric-label {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-muted);
    margin-bottom: .25rem
}

.metric-desc {
    font-size: .78rem;
    color: var(--ink-muted)
}

/* ── SECTION ── */
.section {
    max-width: 860px;
    margin: 0 auto;
    padding: 3rem 2rem;
    border-bottom: 1px solid var(--rule)
}

.section-title {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ink-muted);
    margin-bottom: 2.5rem
}

/* ── SKILLS ── */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem
}

.skill-group-label {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-muted);
    margin-bottom: .75rem
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem
}

.tag {
    background: var(--tag-bg);
    color: var(--ink-mid);
    font-size: .78rem;
    padding: .2rem .6rem;
    border-radius: 3px;
    font-weight: 500
}

.tag.primary {
    background: var(--accent-light);
    color: var(--accent)
}

/* ── ROAD TIMELINE ── */
.road-outer {
    max-width: 860px;
    margin: 0 auto;
    padding: 3rem 2rem 2rem;
    border-bottom: 1px solid var(--rule)
}

.road-legend {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    font-size: .75rem;
    color: var(--ink-muted);
    align-items: center
}

.road-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: .35rem;
    vertical-align: middle
}

.road-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem
}

.road-svg {
    display: block;
    min-width: 780px
}

/* ── WORK HISTORY ── */
.wh-item {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 2rem;
    padding: 2rem 0;
    border-top: 1px solid var(--rule)
}

.wh-item:first-child {
    border-top: none
}

.wh-meta {
    padding-top: .15rem
}

.wh-year {
    font-family: var(--serif);
    font-size: 1.5rem;
    color: var(--ink);
    line-height: 1
}

.wh-period {
    font-size: .72rem;
    color: var(--ink-muted);
    margin-top: .3rem
}

.wh-loc {
    font-size: .72rem;
    color: var(--ink-muted);
    margin-top: .15rem;
    font-style: italic
}

.wh-company {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--accent);
    margin-bottom: .3rem
}

.wh-role {
    font-family: var(--serif);
    font-size: 1.3rem;
    line-height: 1.2;
    margin-bottom: .75rem
}

.wh-badge {
    display: inline-block;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: var(--tag-bg);
    color: var(--ink-muted);
    padding: .15rem .5rem;
    border-radius: 2px;
    margin-bottom: .75rem
}

.wh-bullets {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.wh-bullets li {
    font-size: .875rem;
    color: var(--ink-mid);
    padding-left: 1rem;
    position: relative
}

.wh-bullets li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--rule)
}

/* ── EDUCATION ── */
.edu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem
}

.edu-card {
    border-top: 3px solid var(--ink);
    padding-top: 1rem
}

.edu-school {
    font-family: var(--serif);
    font-size: 1.1rem;
    margin-bottom: .25rem
}

.edu-degree {
    font-size: .85rem;
    color: var(--ink-mid);
    margin-bottom: .15rem
}

.edu-years {
    font-size: .75rem;
    color: var(--ink-muted)
}

/* ── ABOUT ── */
.about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem
}

.about-group-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ink-muted);
    margin-bottom: .6rem
}

.about-items {
    display: flex;
    flex-direction: column;
    gap: .4rem
}

.about-item {
    font-size: .9rem;
    color: var(--ink-mid)
}

/* ── FOOTER ── */
footer {
    max-width: 860px;
    margin: 0 auto;
    padding: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .78rem;
    color: var(--ink-muted)
}

footer a {
    color: var(--ink-muted);
    text-decoration: none
}

footer a:hover {
    color: var(--accent)
}

.footer-counter {
    font-size: .75rem;
    color: var(--ink-muted)
}

.footer-counter a {
    color: var(--ink-muted);
    text-decoration: none
}

.footer-counter a:hover {
    color: var(--accent)
}

/* ── TERMINAL OVERLAY ── */
#terminal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(4px);
    z-index: 1000;
    align-items: center;
    justify-content: center
}

#terminal-overlay.open {
    display: flex
}

#terminal-window {
    width: min(680px, 92vw);
    background: #1a1b26;
    border-radius: 10px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .5);
    overflow: hidden;
    font-family: 'Fira Mono', 'Cascadia Code', 'Courier New', monospace;
    font-size: 13.5px
}

#terminal-titlebar {
    background: #16172a;
    padding: .6rem 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.term-dots {
    display: flex;
    gap: .4rem
}

.term-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    cursor: pointer
}

#terminal-title {
    flex: 1;
    text-align: center;
    font-size: .75rem;
    color: #565f89;
    letter-spacing: .04em
}

#terminal-close {
    background: none;
    border: none;
    color: #565f89;
    cursor: pointer;
    font-size: .85rem;
    padding: .1rem .3rem;
    transition: color .2s
}

#terminal-close:hover {
    color: #ff5f57
}

#terminal-body {
    padding: 1rem 1.25rem;
    height: 380px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0
}

#terminal-output {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .15rem
}

.term-line {
    color: #a9b1d6;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word
}

.term-line.cmd {
    color: #7aa2f7
}

.term-line.success {
    color: #9ece6a
}

.term-line.muted {
    color: #565f89
}

.term-line.accent {
    color: #bb9af7
}

.term-line.warn {
    color: #e0af68
}

.term-line.error {
    color: #f7768e
}

.term-line.em {
    color: #73daca
}

#terminal-input-line {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid rgba(255, 255, 255, .05)
}

.term-prompt {
    color: #9ece6a;
    white-space: nowrap;
    font-size: 13px
}

#terminal-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: #c0caf5;
    font-family: inherit;
    font-size: 13.5px;
    caret-color: #7aa2f7
}

#terminal-input::placeholder {
    color: #3b4261
}

.term-hint {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    font-size: .7rem;
    color: var(--ink-muted);
    background: var(--card);
    border: 1px solid var(--rule);
    padding: .35rem .7rem;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .4s
}

.term-hint.show {
    opacity: 1
}

/* ── RESPONSIVE ── */
@media(max-width:640px) {
    nav {
        padding: 0 1rem
    }

    .nav-links {
        display: none
    }

    .hero {
        padding: 3rem 1.25rem 2rem
    }

    .hero-inner {
        flex-direction: column;
        gap: 1.5rem
    }

    .hero-photo {
        width: 80px;
        height: 80px
    }

    .metrics-grid {
        padding: 2rem 1.25rem;
        grid-template-columns: 1fr 1fr
    }

    .metric {
        border-right: none;
        border-bottom: 1px solid var(--rule)
    }

    .section,
    .road-outer {
        padding: 2rem 1.25rem
    }

    .wh-item {
        grid-template-columns: 1fr;
        gap: .4rem
    }

    .wh-meta {
        display: flex;
        gap: 1rem;
        align-items: baseline;
        flex-wrap: wrap
    }

    footer {
        flex-direction: column;
        gap: .5rem;
        text-align: center
    }
}