* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: #070908;
    color: #f1f5f1;
    font-family: Sora, system-ui, sans-serif;
}

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

button {
    font: inherit;
}

.site-header {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(7, 9, 8, 0.9);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid #222a24;
}

.nav {
    height: 68px;
    max-width: 1440px;
    margin: auto;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -0.04em;
}

.brand>span {
    color: #22d472;
}

.brand small {
    font: 500 11px "JetBrains Mono";
    color: #59645d;
    margin-left: 9px;
    letter-spacing: 0.08em;
}

.nav-links {
    display: flex;
    gap: 5px;
}

.nav-links a {
    font: 500 10px "JetBrains Mono";
    color: #818b83;
    padding: 9px 12px;
    border-radius: 4px;
}

.nav-links a:hover {
    color: #22d472;
    background: #101511;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hire {
    font-size: 11px;
    font-weight: 700;
    background: #22d472;
    color: #061009;
    padding: 10px 14px;
    border-radius: 4px;
}

.nav-right button {
    background: transparent;
    color: #cdd4cf;
    border: 1px solid #2a322c;
    width: 34px;
    height: 34px;
    border-radius: 4px;
    /* display: none; */
}

.mobile-nav {
    max-width: 1440px;
    margin: auto;
    padding: 8px 30px 18px;
    border-top: 1px solid #202720;
}

.mobile-nav a {
    display: block;
    padding: 12px 0;
    color: #8c968e;
    font: 500 11px "JetBrains Mono";
}

.hidden {
    display: none !important;
}

.hero {
    min-height: 100vh;
    padding: 145px 30px 50px;
    max-width: 1440px;
    margin: auto;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 75px;
    align-items: center;
    min-height: calc(100vh - 235px);
}

.availability {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    color: #22d472;
    background: #0b1b12;
    border: 1px solid #214d34;
    border-radius: 4px;
    padding: 8px 10px;
    font: 500 11px "JetBrains Mono";
}

.availability i {
    width: 6px;
    height: 6px;
    background: #22d472;
    border-radius: 50%;
    box-shadow: 0 0 12px #22d472;
}

.eyebrow {
    font: 500 12px "JetBrains Mono";
    letter-spacing: 0.14em;
    color: #5d6960;
}

.hero .eyebrow {
    margin-top: 28px;
}

.hero h1 {
    font-size: clamp(40px, 4vw, 72px);
    line-height: 0.9;
    letter-spacing: -0.02em;
    margin: 18px 0 0;
    font-weight: 800;
}

.hero h1 span {
    color: #22d472;
}

.hero h1 b {
    font: 400 0.65em "JetBrains Mono";
    color: #22d472;
    animation: blink 0.75s step-end infinite;
}

.hero-desc {
    max-width: 610px;
    color: #8d978f;
    font-size: 16px;
    line-height: 1.8;
    font-weight: 300;
    margin: 22px 0;
}

.hero-actions {
    display: flex;
    gap: 10px;
}

.btn {
    padding: 13px 17px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
}

.btn.green {
    background: #22d472;
    color: #061009;
}

.btn.outline {
    border: 1px solid #303a32;
    color: #b9c2bc;
}

.btn.outline:hover {
    border-color: #22d472;
    color: #22d472;
}

.quick-stack {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.quick-stack span {
    font: 500 11px "JetBrains Mono";
    color: #768078;
    background: #0d110e;
    border: 1px solid #222a24;
    padding: 6px 8px;
    border-radius: 3px;
}

.terminal {
    background: #0d100e;
    border: 1px solid #252d27;
    border-radius: 7px;
    box-shadow: 0 0 45px rgba(34, 212, 114, 0.11);
    animation: float 3s ease-in-out infinite;
    font-size: 1rem;
}

.terminal-top {
    height: 38px;
    border-bottom: 1px solid #252d27;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 13px;
}

.terminal-top span {
    font-size: 8px;
    color: #3b443e;
}

.terminal-top em {
    margin-left: auto;
    font: 400 11px "JetBrains Mono";
    color: #59635c;
    font-style: normal;
}

.terminal pre {
    margin: 0;
    padding: 16px;
    overflow: auto;
    font: 400 12px/1.9 "JetBrains Mono";
    color: #d6ded8;
}

.terminal pre i {
    color: #555f58;
    font-style: normal;
}

.green {
    color: #22d472;
}

.string {
    color: #7ee8a8;
}

.terminal-bottom {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #252d27;
    padding: 10px 13px;
    font: 500 11px "JetBrains Mono";
    color: #566158;
}

.terminal-bottom span:first-child {
    color: #22d472;
}

.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid #252d27;
    border-bottom: 1px solid #252d27;
}

.stats div {
    padding: 19px 20px;
    border-right: 1px solid #252d27;
}

.stats div:last-child {
    border: 0;
}

.stats b {
    display: block;
    font-size: 28px;
    letter-spacing: -0.06em;
}

.stats span {
    font: 500 11px "JetBrains Mono";
    color: #606b63;
}

.section {
    max-width: 1440px;
    margin: auto;
    padding: 110px 30px;
}

.heading-row {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 42px;
}

.heading-row h2 {
    font-size: clamp(32px, 5vw, 40px);
    line-height: 0.95;
    letter-spacing: -0.07em;
    margin: 12px 0 0;
}

.heading-row h2 span {
    color: #22d472;
}

.heading-note {
    font: 400 12px "JetBrains Mono";
    color: #5d6860;
}

.projects-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.project {
    background: #0f1310;
    border: 1px solid #242c26;
    border-radius: 9px;
    overflow: hidden;
    transition:
        border-color 0.18s,
        box-shadow 0.18s,
        transform 0.18s;
}

.project:hover {
    border-color: #22d472;
    box-shadow: 0 0 32px rgba(34, 212, 114, 0.12);
    transform: translateY(-3px);
}

.project-image {
    height: 285px;
    background: #0a0d0b;
    overflow: hidden;
    border-bottom: 1px solid #242c26;
}

.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.project:hover .project-image img {
    transform: scale(1.025);
}

.project-image.contain {
    background: #090c0a;
    padding: 14px;
}

.project-image.contain img {
    object-fit: contain;
}

.project-body {
    padding: 24px 25px 27px;
}

.project-body>small {
    font: 500 11px "JetBrains Mono";
    color: #22d472;
    letter-spacing: 0.1em;
}

.project-body h3 {
    font-size: 25px;
    letter-spacing: -0.05em;
    margin: 12px 0 9px;
}

.project-body p {
    color: #89938c;
    font-size: 11px;
    line-height: 1.75;
    min-height: 58px;
    margin: 0;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 17px 0;
}

.chips span {
    font: 500 11px "JetBrains Mono";
    padding: 6px 7px;
    border: 1px solid #29312b;
    background: #0b0e0c;
    color: #768078;
    border-radius: 3px;
}

.project-body>strong {
    font: 500 12px "JetBrains Mono";
    color: #22d472;
}

.food-visual {
    position: relative;
    background: linear-gradient(125deg, #26160e, #7d3b18 55%, #15100d);
}

.food-visual:before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 28% 42%,
            rgba(255, 192, 89, 0.55),
            transparent 14%),
        radial-gradient(circle at 62% 55%,
            rgba(255, 107, 36, 0.42),
            transparent 19%),
        radial-gradient(circle at 45% 70%,
            rgba(255, 220, 130, 0.25),
            transparent 20%);
}

.food-overlay {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 16%;
    bottom: 16%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(8, 8, 7, 0.38);
    backdrop-filter: blur(4px);
}

.food-overlay small {
    font: 500 11px "JetBrains Mono";
    color: #ffd08a;
}

.food-overlay b {
    font-size: 42px;
    letter-spacing: -0.07em;
}

.food-overlay span {
    font: 400 10px "JetBrains Mono";
    color: #c7b8a8;
    margin-top: 5px;
}

.food-overlay button {
    margin-top: 18px;
    align-self: flex-start;
    background: #22d472;
    border: 0;
    padding: 9px 12px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
}

.older {
    display: flex;
    gap: 20px;
    align-items: center;
    border-top: 1px solid #252d27;
    margin-top: 45px;
    padding-top: 18px;
    font: 500 12px "JetBrains Mono";
    color: #657068;
}

.older b {
    color: #aab3ad;
}

.older a {
    margin-left: auto;
    color: #22d472;
}

.stack-section {
    background: #0d100e;
    border-top: 1px solid #191f1b;
    border-bottom: 1px solid #191f1b;
    max-width: none;
}

.stack-wrap {
    max-width: 1440px;
}

.stack-big {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid #252d27;
}

.stack-panel {
    padding: 38px;
    border-right: 1px solid #252d27;
    border-bottom: 1px solid #252d27;
    min-height: 310px;
}

.stack-panel:nth-child(2n) {
    border-right: 0;
}

.stack-panel:nth-child(3),
.stack-panel:nth-child(4) {
    border-bottom: 0;
}

.stack-panel>small {
    font: 500 12px "JetBrains Mono";
    color: #22d472;
}

.stack-panel h3 {
    font-size: 27px;
    letter-spacing: -0.05em;
    margin: 55px 0 22px;
}

.tech-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tech-list b {
    font: 500 13px "JetBrains Mono";
    color: #e3e8e4;
    background: #111612;
    border: 1px solid #29332c;
    border-radius: 4px;
    padding: 10px 12px;
    transition: 0.18s;
}

.tech-list b:hover {
    border-color: #22d472;
    color: #22d472;
    box-shadow: 0 0 22px rgba(34, 212, 114, 0.09);
}

.about {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 90px;
    align-items: center;
}

.portrait {
    position: relative;
}

.portrait img {
    display: block;
    width: min(100%, 420px);
    aspect-ratio: 4/5;
    object-fit: cover;
    /* filter: grayscale(100%); */
    border: 1px solid #283029;
    border-radius: 7px;
}

.portrait:after {
    content: "";
    position: absolute;
    left: 18px;
    right: 35px;
    top: 18px;
    bottom: -18px;
    border: 1px solid #1b3b28;
    border-radius: 7px;
    z-index: -1;
}

.portrait span {
    font: 500 11px "JetBrains Mono";
    color: #58645b;
    display: block;
    margin: 10px 40px;
}

.about-copy h2,
.experience h2 {
    font-size: clamp(32px, 5.2vw, 42px);
    line-height: 0.94;
    letter-spacing: -0.07em;
    margin: 15px 0 28px;
}

.about-copy h2 span,
.experience h2 span {
    color: #22d472;
}

.about-copy>p:not(.eyebrow) {
    max-width: 700px;
    color: #8b958e;
    font-size: 16px;
    line-height: 1.9;
}

.about-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid #252d27;
    border-bottom: 1px solid #252d27;
    margin-top: 30px;
}

.about-metrics div {
    padding: 15px 10px;
    border-right: 1px solid #252d27;
}

.about-metrics div:last-child {
    border: 0;
}

.about-metrics b {
    display: block;
    font-size: 21px;
}

.about-metrics span {
    font: 500 11px "JetBrains Mono";
    color: #5e6961;
}

.experience {
    max-width: 1200px;
}

.experience-list {
    margin-top: 45px;
}

.experience-row {
    display: grid;
    grid-template-columns: 170px 1fr 100px;
    gap: 45px;
    padding: 35px 0;
    border-top: 1px solid #252d27;
}

.experience-row time {
    font: 500 13px/1.7 "JetBrains Mono";
    color: #68736b;
}

.experience-row small {
    font: 500 13px "JetBrains Mono";
    color: #22d472;
}

.experience-row h3 {
    font-size: 26px;
    margin: 8px 0 10px;
    letter-spacing: -0.05em;
}

.experience-row p {
    font-size: 14px;
    line-height: 1.8;
    color: #89938c;
    margin: 0;
}

.experience-row>b {
    font-size: 30px;
    color: #22d472;
    text-align: right;
}

.experience-row b i {
    display: block;
    font: 500 11px "JetBrains Mono";
    color: #5f6962;
    font-style: normal;
}

.recognition {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    border-top: 1px solid #252d27;
    padding-top: 22px;
    margin-top: 20px;
}

.recognition small {
    width: 100%;
    font: 500 11px "JetBrains Mono";
    color: #22d472;
}

.recognition span {
    font: 500 12px "JetBrains Mono";
    color: #8c968f;
    border: 1px solid #252d27;
    padding: 10px;
    border-radius: 4px;
}

.contact {
    background: #050705;
    border-top: 1px solid #19201b;
    text-align: center;
    padding: 115px 30px;
}

.contact-inner {
    max-width: 1000px;
    margin: auto;
}

.contact h2 {
    font-size: clamp(52px, 8vw, 105px);
    line-height: 0.9;
    letter-spacing: -0.08em;
    margin: 20px 0;
}

.contact h2 span {
    color: #22d472;
}

.contact-inner>p:not(.eyebrow) {
    font-size: 13px;
    color: #6e796f;
}

.email {
    display: inline-block;
    color: #22d472;
    font: 500 clamp(16px, 2vw, 22px) "JetBrains Mono";
    text-decoration: underline;
    text-underline-offset: 8px;
    margin: 30px 0;
}

.contact-links {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    font: 500 12px "JetBrains Mono";
    color: #68736b;
}

.contact-links a:hover {
    color: #22d472;
}

footer {
    /* max-width: 1440px; */
    margin: auto;
    padding: 27px 30px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: #5c675f;
    font: 500 12px "JetBrains Mono";
    border-top: 1px solid #1e251f;
}

footer b {
    color: #aeb7b0;
}

footer b span {
    color: #59635c;
    font-weight: 400;
    margin-left: 8px;
}

footer a:hover {
    color: #22d472;
}

.reveal {
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

.fast {
    transition-duration: 0.18s;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

body.light {
    background: #f5f7f4;
    color: #101310;
}

.light .site-header {
    background: rgba(245, 247, 244, 0.9);
    border-color: #dce2dc;
}

.light .nav-links a {
    color: #68716b;
}

.light .nav-links a:hover {
    background: #e9eee9;
    color: #118b52;
}

.light .terminal,
.light .project,
.light .stack-panel,
.light .stack-big {
    background: #fff;
}

.light .terminal,
.light .project,
.light .stack-big,
.light .stack-panel,
.light .stats,
.light .experience-row,
.light .about-metrics,
.light .older,
.light footer {
    border-color: #dfe5df;
}

.light .hero-desc,
.light .project-body p,
.light .about-copy>p:not(.eyebrow),
.light .experience-row p {
    color: #5e6861;
}

.light .quick-stack span,
.light .chips span,
.light .tech-list b {
    background: #f5f7f4;
    color: #59635c;
    border-color: #dfe5df;
}

.light .stack-section {
    background: #edf2ed;
    color: #111;
}

.light .stack-section .stack-panel {
    background: #f7f9f7;
}

.light .contact {
    background: #101310;
}

.light .heading-note {
    color: #6d776f;
}

@media (max-width: 950px) {
    .nav-links {
        display: none;
    }

    .nav-right button {
        display: block;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .terminal {
        max-width: 720px;
    }

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

    .stack-big {
        grid-template-columns: 1fr;
    }

    .stack-panel,
    .stack-panel:nth-child(2n),
    .stack-panel:nth-child(3),
    .stack-panel:nth-child(4) {
        border-right: 0;
        border-bottom: 1px solid #252d27;
    }

    .stack-panel:last-child {
        border-bottom: 0;
    }

    .about {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .portrait img {
        max-width: 300px;
    }

    .experience-row {
        grid-template-columns: 140px 1fr;
    }

    .experience-row>b {
        display: none;
    }
}

@media (max-width: 600px) {

    .section {
        max-width: 1440px;
        margin: auto;
        padding: 60px 20px;
    }

    .nav {
        padding: 0 16px;
    }

    .brand {
        font-size: 15px;
    }

    .brand small {
        display: none;
    }

    .hero,
    .section {
        padding-left: 18px;
        padding-right: 18px;
    }

    .hero {
        padding-top: 125px;
    }

    .hero h1 {
        font-size: 32px;
    }

    .hero-desc {
        font-size: 13px;
    }

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

    .stats div {
        padding: 16px 12px;
    }

    .stats b {
        font-size: 23px;
    }

    .stats span {
        font-size: 7px;
    }

    .heading-row {
        display: block;
    }

    .heading-note {
        margin-top: 15px;
    }

    .project-image {
        height: 230px;
    }

    .project-body {
        padding: 21px;
    }

    .project-body h3 {
        font-size: 24px;
    }

    .food-overlay b {
        font-size: 34px;
    }

    .stack-panel {
        padding: 28px 22px;
        min-height: 0;
    }

    .stack-panel h3 {
        margin: 35px 0 18px;
        font-size: 23px;
    }

    .tech-list b {
        font-size: 11px;
        padding: 9px;
    }

    .about-metrics {
        grid-template-columns: 1fr 1fr;
    }

    .about-metrics div:nth-child(2) {
        border-right: 0;
    }

    .about-metrics div:nth-child(3),
    .about-metrics div:nth-child(4) {
        border-top: 1px solid #252d27;
    }

    .experience-row {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .recognition span {
        width: 100%;
    }

    .older {
        flex-wrap: wrap;
    }

    .older a {
        width: 100%;
        margin-left: 0;
    }

    .contact {
        padding: 90px 18px;
    }

    .contact-links {
        gap: 14px;
    }

    footer {
        padding: 22px 18px;
        flex-direction: column;
    }

    .terminal,
    .hero-copy {
        width: 60%;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}

/* v4 refinements */
.theme-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    transition: 0.18s;
}

.theme-toggle:hover {
    border-color: #22d472 !important;
    color: #22d472 !important;
}

.nav-right #menu {
    display: none;
}

.terminal-label {
    padding: 10px 27px 0;
    font: 600 11px "JetBrains Mono";
    letter-spacing: 0.14em;
    color: #22d472;
}

.terminal pre {
    font-size: 11px;
    line-height: 1.85;
    color: #dce5df;
}

.terminal pre .key {
    color: #9be7b8;
}

.terminal pre .number {
    color: #f1c76b;
}

.terminal pre .string {
    color: #8be9ad;
}

.terminal pre b {
    color: #fff;
}

.terminal pre i {
    color: #69756d;
}

.terminal {
    min-height: 450px;
}

.terminal-bottom {
    color: #77837a;
}

.terminal-bottom span:last-child {
    color: #a8b3aa;
}

.projects-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.project-image {
    height: 220px;
}

.project-image.contain {
    padding: 0;
}

.project-image.contain img {
    object-fit: cover;
    object-position: center 38%;
}

.project-body {
    padding: 20px 20px 22px;
}

.project-body h3 {
    font-size: 21px;
    margin: 9px 0 8px;
}

.project-body p {
    font-size: 14px;
    line-height: 1.65;
    /* min-height: 66px; */
}

.chips {
    margin: 14px 0;
    gap: 4px;
}

.chips span {
    font-size: 12px;
    padding: 3px 4px;
}

.project-body>small {
    font-size: 7px;
}

.project-body>strong {
    font-size: 11px;
}

.project-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.project-visual:before,
.project-visual:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(1px);
}

.hotel-visual {
    background:
        radial-gradient(circle at 70% 30%, #536f5c, transparent 30%),
        linear-gradient(135deg, #111a15, #263c30 58%, #101511);
}

.hotel-visual:before {
    width: 190px;
    height: 190px;
    right: -30px;
    top: -65px;
    background: rgba(34, 212, 114, 0.16);
}

.phonepe-visual {
    background:
        radial-gradient(circle at 75% 30%, #d9b866, transparent 24%),
        linear-gradient(135deg, #17150f, #44361b 58%, #10100d);
}

.phonepe-visual:before {
    width: 220px;
    height: 220px;
    right: -50px;
    top: -90px;
    background: rgba(245, 190, 76, 0.15);
}

.fintech-visual {
    background:
        radial-gradient(circle at 25% 35%, #1f6848, transparent 28%),
        linear-gradient(135deg, #07120d, #102b1c 55%, #08100b);
}

.fintech-visual:before {
    width: 260px;
    height: 260px;
    right: -80px;
    bottom: -130px;
    background: rgba(34, 212, 114, 0.18);
}

.visual-copy {
    position: relative;
    z-index: 2;
    width: 82%;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 9px;
    background: rgba(5, 8, 6, 0.46);
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

.visual-copy small {
    font: 600 7px "JetBrains Mono";
    color: #22d472;
    letter-spacing: 0.12em;
}

.visual-copy b {
    font-size: 24px;
    line-height: 1;
    letter-spacing: -0.05em;
    color: #fff;
    margin: 18px 0 7px;
}

.visual-copy span {
    font: 500 11px "JetBrains Mono";
    color: #aab8ae;
}

.older {
    justify-content: flex-end;
}

.older span {
    margin-right: auto;
}

.older b {
    display: none;
}

.education-block {
    margin-top: 52px;
    border-top: 1px solid #252d27;
}

.timeline-label {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 0 8px;
}

.timeline-label span {
    font: 600 11px "JetBrains Mono";
    color: #22d472;
    letter-spacing: 0.14em;
}

.timeline-label b {
    font: 500 12px "JetBrains Mono";
    color: #68736b;
}

.education-row {
    display: grid;
    grid-template-columns: 170px 1fr 55px;
    gap: 45px;
    padding: 30px 0;
    border-top: 1px solid #252d27;
}

.education-row time {
    font: 500 13px/1.7 "JetBrains Mono";
    color: #68736b;
}

.education-row small {
    font: 500 12px "JetBrains Mono";
    color: #22d472;
}

.education-row h3 {
    font-size: 24px;
    margin: 8px 0 9px;
    letter-spacing: -0.05em;
}

.education-row p {
    font-size: 14px;
    line-height: 1.8;
    color: #89938c;
    margin: 0;
    max-width: 720px;
}

.education-row>b {
    font: 700 22px "JetBrains Mono";
    color: #29332c;
    text-align: right;
}

/* Light mode: deliberately re-map every formerly light-on-dark code/text element for strong contrast. */
body.light .terminal {
    background: #ffffff;
    border-color: #ccd8ce;
    box-shadow: 0 16px 45px rgba(27, 70, 44, 0.1);
}

body.light .terminal-top {
    border-color: #dbe3dc;
}

body.light .terminal-top span {
    color: #87938a;
}

body.light .terminal-top em {
    color: #647168;
}

body.light .terminal-label {
    color: #087e48;
}

body.light .terminal pre {
    color: #253229;
}

body.light .terminal pre i {
    color: #718078;
}

body.light .terminal pre .key {
    color: #086f43;
}

body.light .terminal pre .string {
    color: #0b7d49;
}

body.light .terminal pre .number {
    color: #9a6500;
}

body.light .terminal pre b {
    color: #17201b;
}

body.light .terminal-bottom {
    border-color: #dbe3dc;
    color: #647168;
}

body.light .terminal-bottom span:first-child {
    color: #087e48;
}

body.light .terminal-bottom span:last-child {
    color: #536158;
}

body.light .hero h1 {
    color: #111711;
}

body.light .hero h1 span,
body.light .hero h1 b {
    color: #087e48;
}

body.light .eyebrow {
    color: #5d6a61;
}

body.light .quick-stack span {
    color: #445149;
}

body.light .btn.outline {
    color: #344139;
    border-color: #c9d4cc;
}

body.light .project {
    background: #fff;
    border-color: #d5ded7;
}

body.light .project-body h3 {
    color: #111711;
}

body.light .project-body>small,
body.light .project-body>strong {
    color: #087e48;
}

body.light .chips span {
    color: #455249;
    border-color: #d5ded7;
    background: #f4f7f4;
}

body.light .heading-note {
    color: #657169;
}

body.light .older {
    border-color: #d5ded7;
}

body.light .older a {
    color: #087e48;
}

body.light .stack-panel>small {
    color: #087e48;
}

body.light .stack-panel h3 {
    color: #111711;
}

body.light .tech-list b {
    color: #17201b;
    background: #fff;
    border-color: #cbd7cf;
    font-size: 13px;
    padding: 11px 14px;
}

body.light .tech-list b:hover {
    color: #087e48;
    border-color: #087e48;
}

body.light .education-block,
body.light .education-row,
body.light .experience-row {
    border-color: #d5ded7;
}

body.light .education-row h3,
body.light .experience-row h3 {
    color: #111711;
}

body.light .education-row p,
body.light .experience-row p {
    color: #59665d;
}

body.light .education-row small,
body.light .experience-row small {
    color: #087e48;
}

.light .timeline-label span {
    color: #087e48;
}

.light .timeline-label b {
    color: #68756c;
}

.light .education-row>b {
    color: #b6c3b9;
}

.tech-list b {
    font-size: 14px;
    padding: 11px 14px;
    color: #eef4ef;
}

.stack-panel h3 {
    font-size: 31px;
    margin-top: 45px;
}

.stack-panel {
    min-height: 330px;
}

@media (max-width: 1100px) {
    .projects-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .terminal {
        min-height: 0;
    }

    .stack-panel {
        min-height: 300px;
    }
}

@media (max-width: 950px) {

    .nav-right #menu {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .nav-right .theme-toggle {
        display: flex !important;
    }

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

    .education-row {
        grid-template-columns: 140px 1fr;
    }

    .education-row>b {
        display: none;
    }
}

@media (max-width: 700px) {
    .projects-grid {
        grid-template-columns: 1fr;
    }

    .project-image {
        height: 230px;
    }

    .visual-copy b {
        font-size: 22px;
    }

    .education-row {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    body.light .terminal {
        background: #ffffff;
        border-color: #ccd8ce;
        max-width: 90vw !important;
        box-shadow: 0 16px 45px rgba(27, 70, 44, 0.1);
    }

    /* .terminal {
   display: none !important;
} */
    .timeline-label {
        display: block;
    }

    .timeline-label b {
        display: block;
        margin-top: 8px;
    }

    .terminal pre {
        font-size: 10px;
    }

    .terminal-label {
        padding-left: 20px;
    }

    .tech-list b {
        font-size: 14px;
    }
}

/* v5 polish */
.brand {
    font-size: 24px;
    letter-spacing: -0.055em;
}

.brand small {
    font-size: 10px;
    margin-left: 10px;
}

.nav {
    height: 72px;
}

.terminal {
    min-height: 0;
}

.terminal pre {
    font-size: 12px;
    line-height: 1.75;
    padding: 18px;
}

.terminal-label {
    font-size: 8px;
}

.project-image {
    height: 180px;
}

.project-body {
    padding: 17px 18px 19px;
}

.project-body h3 {
    font-size: 20px;
    margin: 8px 0 7px;
}

.project-body p {
    font-size: 14px;
    /* line-height: 1.7;
    min-height: 88px; */
    color: #9aa49d;
}

.chips {
    margin: 12px 0;
}

.project-body>small {
    font-size: 11px;
}

.recognition {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    border-top: 1px solid #252d27;
    padding-top: 32px;
    margin-top: 32px;
}

.recognition-head {
    grid-column: 1/-1;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 25px;
    margin-bottom: 5px;
}

.recognition-head small {
    font: 700 13px "JetBrains Mono";
    color: #22d472;
    letter-spacing: 0.16em;
}

.recognition-head>span {
    font: 400 11px "JetBrains Mono";
    color: #68736b;
}

.recognition-card {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 118px;
    padding: 24px;
    border: 1px solid #29322c;
    border-radius: 7px;
    background: #0f1411;
}

.recognition-card>b {
    font-size: 32px;
    color: #22d472;
}

.recognition-card small {
    display: block;
    font: 600 11px "JetBrains Mono";
    color: #22d472;
    letter-spacing: 0.12em;
    margin-bottom: 8px;
}

.recognition-card strong {
    display: block;
    font-size: 17px;
    line-height: 1.2;
    letter-spacing: -0.035em;
    color: #eaf0eb;
}

footer {
    padding: 34px 30px;
    background: #070908;
    border-top: 1px solid #252d27;
    color: #657169;
}

footer b {
    font-size: 13px;
    color: #dce4de;
}

footer b span {
    font-size: 9px;
    color: #68736b;
}

footer small {
    font-size: 9px;
}

footer a {
    font-size: 9px;
    color: #89958d;
}

body.light footer {
    background: #edf2ee;
    color: #5f6b63;
    border-color: #d3ddd5;
}

body.light footer b {
    color: #17201b;
}

body.light footer b span {
    color: #647168;
}

body.light footer a {
    color: #526057;
}

body.light .recognition {
    border-color: #d5ded7;
}

body.light .recognition-head>span {
    color: #647168;
}

body.light .recognition-card {
    background: #fff;
    border-color: #d5ded7;
}

body.light .recognition-card strong {
    color: #17201b;
}

body.light .recognition-card small {
    color: #087e48;
}

body.light .recognition-card>b {
    color: #087e48;
}

body.light .project-body p {
    color: #56635b;
}

body.light .contact {
    background: #edf2ee;
    color: #111711;
    border-color: #d5ded7;
}

body.light .contact-inner>p:not(.eyebrow) {
    color: #59665d;
}

body.light .email {
    color: #087e48;
}

body.light .contact-links {
    color: #59665d;
}

body.light .contact-links a:hover {
    color: #087e48;
}

@media (max-width: 1100px) {
    .project-image {
        height: 190px;
    }

    .recognition-card strong {
        font-size: 15px;
    }
}

@media (max-width: 700px) {
    .brand {
        font-size: 19px;
    }

    .brand small {
        display: none;
    }

    .project-image {
        height: 205px;
    }

    .project-body p {
        min-height: 0;
        font-size: 11px;
    }

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

    .recognition-head {
        display: block;
    }

    .recognition-head>span {
        display: block;
        margin-top: 9px;
        line-height: 1.6;
    }

    .recognition-card {
        min-height: 100px;
        padding: 20px;
    }

    .recognition-card strong {
        font-size: 16px;
    }

    body.light .tech-list b {
        color: #17201b;
        background: #fff;
        border-color: #cbd7cf;
        font-size: 12px;
        padding: 9px;
    }
}