:root{color-scheme:dark;--bg:#0b0d12;--surface:#11151d;--surface-2:#161b25;--line:#282e39;--text:#f3f4f0;--muted:#a5abb7;--soft:#77808d;--accent:#b9ed72;--accent-2:#81c6ad;--shadow:#0008;--mono:'DM Mono',monospace;--sans:'Manrope',Arial,sans-serif;--wrap:min(1120px,88vw)}
html[data-theme="light"]{color-scheme:light;--bg:#f3f4f0;--surface:#fff;--surface-2:#e8ece8;--line:#d6ddd8;--text:#1b2222;--muted:#586360;--soft:#77817c;--accent:#527e34;--accent-2:#307966;--shadow:#1c29201c}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:84px}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.65 var(--sans);overflow-x:hidden;transition:background .35s,color .35s;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}.section-wrap{width:var(--wrap);margin-inline:auto}
.background-lines{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-1;
    opacity:.12;
    background:repeating-linear-gradient(132deg,transparent 0 96px,var(--accent-2) 97px,transparent 98px 194px);
    mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
}
.skill-logo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.skill-logo img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
}
.background-lines:after{
    content:"";
    position:absolute;
    inset:-50%;
    background:repeating-linear-gradient(42deg,transparent 0 164px,var(--accent) 165px,transparent 166px 328px);
    opacity:.3;
    animation:line-drift 48s linear infinite reverse}@keyframes line-drift{to{transform:translate3d(80px,-80px,0)}}
.site-header{
    height:80px;
    width:min(1260px,90vw);
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid var(--line);
    position:relative;z-index:2}
.brand{
    display:inline-flex;
    align-items:center;
    gap: 10px;
    flex-shrink: 0;}
.brand-logo{
    display: block;
    width: 230px;
    height: auto;
    object-fit: contain;}
[data-theme="dark"] .logo-dark {
    display: block;
}

[data-theme="dark"] .logo-light {
    display: none;
}
[data-theme="light"] .logo-dark {
    display: none;
}
[data-theme="light"] .logo-light {
    display: block;
}
.main-nav{
    display:flex;
    align-items:center;
    gap:clamp(18px,3vw,39px);
    font-size:11px;
    color:var(--muted);
    font-weight:700}
.main-nav a,.footer-links a{
    display: inline-flex;
    align-items: center;
    padding:12px 15px;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;}
.main-nav a:hover,
.footer-links a:hover {
    background-color: #527e34;
    color: #fff;
}
.nav-cta {
    border: 1px solid var(--line);
    padding: 9px 13px;
    color: var(--text);
}
.nav-cta span {
    transition: color 0.3s ease;
}
.nav-cta:hover span {
    color: #fff;
}
.hero{
    min-height:680px;
    position:relative;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    align-items:center;
    padding:55px 0 84px}
.eyebrow,.hero-skills,.scroll-cue,.photo-label,.portrait-note,.orbit-tag,.section-label,.about-facts small,.project-type,.tags,.project-index,.project-art small,.detection-label,.model-pill,.timeline-item>small,.certifications>small,.availability,.social-links,.contact-form label,.form-note,.copyright,.footer-links,.theme-toggle{
    font:9px var(--mono);
    letter-spacing:1.15px}
.eyebrow{
    display:flex;
    gap:10px;
    align-items:center;
    color:var(--muted)}
.eyebrow i{
    font-style:normal;
    color:var(--soft)}
.status-dot,.availability i{
     display: inline-block;
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--accent), transparent 35%);
    animation: pulse-dot 2s ease-in-out infinite;}
@keyframes pulse-dot {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent), transparent 45%);
    }
    50% {
        opacity: 0.8;
        box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent), transparent 85%);
    }
}
.intro{
    color:var(--muted);
    font-size:14px;
    margin:35px 0 0}
.intro strong{
    color:var(--text);
    font-weight:700}
.hero h1{
    font-size:clamp(50px,6.8vw,83px);
    line-height:1.02;
    letter-spacing:-5px;
    margin:8px 0 25px;
    font-weight:700}
.hero h1 em,.section-title em{
    color:var(--accent);
    font-family:Georgia,serif;
    font-weight:400;
    letter-spacing:-3px}
.hero-text{
    max-width:465px;
    color:var(--muted);
    font-size:13px;
    line-height:1.9}
.hero-actions{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-top:29px}
.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    padding:13px 16px;
    border:1px solid transparent;
    cursor:pointer;
    font-size:10px;
    font-weight:800;
    transition:transform .2s,background .2s,color .2s}
.button:hover{
    transform:translateY(-2px)}
.button-primary{
    background:var(--accent);
    color:var(--bg)}
.button-primary:hover{
    filter:brightness(1.08)}
.button-quiet{
    border-color:var(--line);
    color:var(--text)}
.button-quiet:hover{
    border-color:var(--accent)}
.hero-skills{
    display:flex;
    gap:12px;
    align-items:center;
    color:var(--soft);
    margin-top:48px}
.hero-skills b{
    color:var(--accent);
    font-weight:400}
.hero-portrait{
    height:500px;
    position:relative;
    display:grid;
    place-items:center}
.portrait-halo{
    position:absolute;
    width:390px;
    height:390px;
    border:1px solid color-mix(in srgb,var(--accent),transparent 80%);
    border-radius:50%;
    box-shadow:0 0 0 28px color-mix(in srgb,var(--accent),transparent 96%),0 0 110px color-mix(in srgb,var(--accent),transparent 94%)}
.portrait-card{
    width:305px;
    height:420px;
    position:relative;
    z-index:1;
    padding:8px;
    background:var(--surface);
    border:1px solid var(--line);
    box-shadow:25px 28px 80px var(--shadow);
    transform:rotate(1.2deg)}
.portrait-card:after{
    content:"";
    position:absolute;
    inset:17px;
    border:1px solid #ffffff35;
    pointer-events:none}
.portrait-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 24%;
    filter:saturate(.78)}
.photo-label{
    position:absolute;
    z-index:2;
    bottom:19px;
    left:20px;
    color:#fff}
.photo-label i{
    font-style:normal;
    color:#d4d7d9}
.portrait-note{
    position:absolute;
    right:-5px;
    top:70px;
    writing-mode:vertical-rl;
    color:var(--muted);
    line-height:1.6}
.orbit-tag{
    position:absolute;
    bottom:64px;
    left:2%;
    background:var(--accent);
    color:var(--bg);
    padding:10px 13px}
.orbit-tag b{
    margin:0 4px}
.scroll-cue{
    position:absolute;
    bottom:22px;
    left:0;
    right:0;
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--soft);
    font-size:8px}
.scroll-cue i{
    height:1px;
    width:65px;
    background:var(--line)}
.scroll-cue span:last-child{
    margin-left:auto}
.content-section{padding:95px 0 100px;border-top:1px solid var(--line)}.section-label{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:8px}.section-label span{color:var(--accent)}.section-label i{width:34px;height:1px;background:var(--soft)}.about-layout,.learning-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:10%;margin-top:46px}.section-title{font-size:clamp(38px,4.8vw,58px);line-height:1.1;letter-spacing:-3px;margin:0;font-weight:600}.section-title em{font-size:1em}.about-copy{color:var(--muted);font-size:12px;line-height:1.9}.about-copy .lead{color:var(--text);font-size:16px;line-height:1.65;margin:0 0 15px}.about-facts{display:flex;gap:48px;margin-top:28px}.about-facts div{display:grid;gap:7px}.about-facts small{color:var(--accent);font-size:8px}.about-facts strong{font-size:10px;color:var(--text);font-weight:600}
.skills-section{
    padding:88px 0 84px;
    background:color-mix(in srgb,var(--surface),transparent 22%);
    border-block:1px solid var(--line);
    overflow:hidden}
.skills-heading,.section-heading,.message-heading{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:30px;
    margin:38px 0 32px}
.skills-heading>p,.section-heading>p,.message-heading>p{
    max-width:265px;
    color:var(--muted);
    font-size:11px;
    line-height:1.8;
    margin:0 4% 6px 0}
.skill-marquee{
    width:100%;
    overflow:hidden;
    mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.skill-track{
    display:flex;
    width:max-content;
}
.skill-track.move-right {
    animation: moveRight 70s linear infinite;
}
.skill-track.move-left {
    animation: moveLeft 70s linear infinite;
}
@keyframes moveRight {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}
@keyframes moveLeft {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}
.skill-marquee:hover .skill-track{
    animation-play-state:paused}
.skill-group{
    display:flex;
    gap:15px;
    padding:10px 16px 19px 0}
.skill-item{
    width:108px;
    min-height:116px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:11px;
    background:var(--bg);
    border:1px solid var(--line);
    color:var(--muted);
    font-size:10px;
    white-space:nowrap;
    transition:border-color .2s,transform .2s}
.skill-item:hover{
    border-color:var(--accent);
    transform:translateY(-3px)}
.skill-logo{
    width:43px;
    height:43px;
    border-radius:50%;
    display:grid;
    place-items:center;
    font:700 12px var(--mono);
    color:var(--logo,#b9ed72);
    background:color-mix(in srgb,var(--logo,#b9ed72),transparent 88%);
    border:1px solid color-mix(in srgb,var(--logo,#b9ed72),transparent 75%);
    box-shadow:0 0 0 5px color-mix(in srgb,var(--logo,#b9ed72),transparent 96%)}
.section-heading{
    margin:40px 0 35px}
.section-heading .section-title{
    margin:0}
.project-list{
    border-top:1px solid var(--line)}
.project-card{
    display:grid;
    grid-template-columns:30px minmax(0,1fr) 255px;
    gap:26px;
    align-items:center;
    padding:25px 0;
    border-bottom:1px solid var(--line)}
.project-index{
    align-self:start;
    padding-top:2px;
    color:var(--soft)}
.project-type{
    font-size:8px;
    color:var(--accent)}
.project-type i{
    font-style:normal;
    color:var(--soft);
    padding:0 4px}
.project-copy h3{
    font-size:19px;
    letter-spacing:-.5px;margin:7px 0}
.project-copy>p:not(.project-type){
    max-width:610px;
    font-size:10px;
    color:var(--muted);
    line-height:1.8;
    margin:0 0 12px}
.tags{
    display:flex;
    gap:6px;
    flex-wrap:wrap}
.tags span{
    border:1px solid var(--line);
    color:var(--muted);
    padding:5px 8px;
    font-size:7px;
    letter-spacing:.4px}
.project-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--text);
    font-size: 10px;
    font-weight: 700;
    margin-top: 13px;
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, var(--accent), transparent 45%);
    border-radius: 4px;
    text-decoration: none;
    transition: border-color .3s ease, background-color .3s ease, color .3s ease;}
.project-link span {
    color: var(--accent);
    transition: transform .3s ease;
}
.project-link:hover {
    color: var(--accent);
    border-color: var(--accent);
    background-color: color-mix(in srgb, var(--accent), transparent 90%);
}
.project-link:hover span {
    transform: translate(2px, -2px);
}
.project-art{
    height:156px;
    position:relative;
    overflow:hidden;
    border:1px solid var(--line);
    background:var(--surface-2)}
.project-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.eye-art{
    display:grid;
    place-items:center;
    background:radial-gradient(ellipse at center,#283649,var(--surface) 75%)}
.eye-shape{
    width:135px;
    height:76px;
    border:1px solid #aac3e6;
    border-radius:50%;
    box-shadow:0 0 0 15px #8cace81c,0 0 0 31px #8cace810;
    transform:scaleY(.8);
    display:grid;
    place-items:center}
.eye-shape i{
    width:21px;
    height:21px;
    border-radius:50%;
    background:#a3c2ed;
    box-shadow:0 0 25px #88b1f4}
.loan-art{
    background:radial-gradient(ellipse at center,#293522,var(--surface) 78%)}
.chart-bars{
    position:absolute;
    left:22px;
    right:22px;
    bottom:35px;
    height:75px;
    display:flex;
    align-items:end;
    gap:8px;
    border-bottom:1px solid #a8b19b38}
.chart-bars i{
    flex:1;
    background:linear-gradient(0deg,#7b9d46,#c6f56a);
    height:53%}
.chart-bars i:nth-child(2){
    height:67%}
.chart-bars i:nth-child(3){
    height:48%}
.chart-bars i:nth-child(4){
    height:77%}
.chart-bars i:nth-child(5){
    height:58%}
.chart-bars i:nth-child(6){
    height:95%}
.chart-bars i:nth-child(7){
    height:80%}
.model-pill{
    position:absolute;
    right:9px;
    top:10px;
    border:1px solid #83a74c;
    color:#d9f5ad;
    padding:4px 6px;
    font-size:6px}
.project-note{
    margin:18px 0 0 56px;
    font-size:9px;
    color:var(--soft)}
.learning-section{padding-bottom:90px}.learning-layout{grid-template-columns:.8fr 1.2fr;margin-top:43px}.timeline{border-top:1px solid var(--line)}.timeline-item{display:grid;grid-template-columns:140px 1fr;gap:18px;padding:21px 0;border-bottom:1px solid var(--line)}.timeline-item>small{color:var(--accent);font-size:8px;line-height:1.7;padding-top:3px}.timeline-item h3{font-size:13px;margin:0 0 5px}.timeline-item p{color:var(--muted);font-size:10px;line-height:1.7;margin:0}.timeline-item .timeline-place{color:var(--text);margin-bottom:6px}.certifications{display:grid;grid-template-columns:120px 1fr;gap:10px;border-top:1px solid var(--line);margin-top:45px;padding-top:18px}.certifications>small{color:var(--accent);font-size:8px}.certifications p{color:var(--muted);font:9px/1.9 var(--mono);margin:0}.certifications b{color:var(--accent);font-weight:400;padding:0 4px}
.message-section{border-top:1px solid var(--line);background:radial-gradient(ellipse at 8% 100%,color-mix(in srgb,var(--accent),transparent 93%),transparent 40%),var(--surface);padding:88px 0 92px}.message-heading{margin-top:38px}.message-heading .section-title{font-size:clamp(40px,5vw,61px)}.contact-panel{display:grid;grid-template-columns:.8fr 1.2fr;border:1px solid var(--line);background:var(--bg);margin-top:32px}.contact-aside{padding:30px;display:flex;flex-direction:column;align-items:flex-start}.availability{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:30px;padding:7px 10px;color:var(--text);font-size:8px}.availability i{width:6px;height:6px}.contact-aside>p{color:var(--muted);font-size:12px;line-height:1.8;margin:21px 0 24px;max-width:310px}.contact-detail{color:var(--text);font:9px var(--mono);margin:0 0 13px;overflow-wrap:anywhere}.contact-detail span{color:var(--accent);padding-left:5px}.social-links{display:flex;gap:18px;margin-top:auto;padding-top:22px;color:var(--muted);font-size:8px}.social-links a:hover{color:var(--accent)}.contact-form{padding:28px;display:grid;gap:8px;background:color-mix(in srgb,var(--surface),transparent 2%)}.contact-form label{color:var(--muted);margin-top:4px;font-size:8px}.contact-form input,.contact-form textarea{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--text);padding:12px 13px;outline:0;font-size:11px;resize:vertical}.contact-form input:focus,.contact-form textarea:focus{border-color:var(--accent)}.contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--soft)}.contact-form .button{justify-self:start;margin-top:8px}.form-note{color:var(--soft);font-size:8px;letter-spacing:.3px}
.site-footer{min-height:105px;display:flex;align-items:center;justify-content:space-between;gap:17px;border-top:1px solid var(--line)}.copyright{color:var(--soft);font-size:8px}.footer-links{display:flex;gap:15px;color:var(--muted);font-size:8px}
.theme-toggle{
    position: relative;
    width: 100px;
    height: 32px;
    padding: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--line);
    border-radius: 30px;
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .5px;
    transition: border-color .3s ease;}
.theme-toggle:hover{
    border-color:var(--accent)}
.theme-option {
    z-index: 1;
    width: 46px;
    text-align: center;
    pointer-events: none;
    transition: color .3s ease;
}
.toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 46px;
    height: 24px;
    border-radius: 20px;
    background: var(--accent);
    transition: transform .3s ease;
}
html[data-theme="dark"] .dark-option {
    color: #000000;
}
html[data-theme="dark"] .light-option {
    color: var(--muted);
}
html[data-theme="light"] .toggle-thumb {
    transform: translateX(46px);
}
html[data-theme="light"] .light-option {
    color: #fff;
}
html[data-theme="light"] .dark-option {
    color: var(--muted);
}
.theme-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
.theme-icon{
    color:var(--accent);
    font-size:14px}
.reveal {
    opacity: 0;
    transform: translateY(25px);
    transition:
        opacity var(--reveal-speed, 0.7s) ease,
        transform var(--reveal-speed, 0.7s) ease;
}
.reveal.from-left{
    transform:translate3d(-44px,0,0)}
.reveal.from-right{
    transform:translate3d(44px,0,0)}
.reveal.from-bottom{
    transform:translate3d(0,32px,0)}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media(max-width:850px){:root{--wrap:min(700px,89vw)}.hero{min-height:620px}.hero-portrait{height:430px}.portrait-card{width:265px;height:370px}.portrait-halo{width:335px;height:335px}.portrait-note{right:-3px}.project-card{grid-template-columns:25px 1fr 210px;gap:18px}.project-art{height:144px}.about-layout,.learning-layout{gap:6%}.site-footer{flex-wrap:wrap;padding:18px 0}.theme-toggle{margin-left:auto}}
@media(max-width:620px){
    .site-header{
        width:89vw;height:70px}
    .brand{
        font-size:8px;
        min-width: 0;}
    .brand-logo{
        width: 100px;
        max-width: 100px;
        height: auto;}
    .main-nav{
        display: flex;
        align-items: center;
        gap:5px;
        font-size:9px}
    .main-nav a {
        padding: 8px 6px;
        white-space: nowrap;}
    .nav-cta{
        padding:7px 9px}
    .hero{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        padding:52px 0 65px;gap:12px}
    .hero h1{
        font-size:clamp(49px,12vw,67px);
        letter-spacing:-4px}
    .intro{
        margin-top:27px}
    .hero-skills{
        font-size:7px;gap:7px;margin-top:33px}
    .hero-portrait{
        height:390px;
        margin-top:12px;
        position: relative;
        overflow: visible;}
    .portrait-card{
        height:330px;
        width:240px;
        position: relative;
        z-index: 1}
    .portrait-halo{
        width:300px;
        height:300px}
    .portrait-note{
        right:1%;
        top:38px}
    .orbit-tag{
        left:4%;
        bottom:28px;
        padding: 8px 8px;
        font-size: 10px;
        gap: 6px;
        z-index: 5}
    .scroll-cue{
        bottom:17px}
    .content-section{padding:73px 0 78px}.about-layout,.learning-layout{grid-template-columns:1fr;gap:24px;margin-top:32px}.section-title{font-size:43px}.about-facts{gap:26px}.skills-section{padding:70px 0}.skills-heading,.section-heading,.message-heading{align-items:flex-start;flex-direction:column;gap:17px;margin:30px 0}.skills-heading>p,.section-heading>p,.message-heading>p{max-width:340px}.skill-item{width:95px;min-height:106px}.skill-group{gap:10px}.skills-footnote{line-height:1.9}.skills-footnote span{display:block;margin-left:0}.project-card{grid-template-columns:24px 1fr;gap:10px;padding:20px 0}.project-copy{grid-column:2}.project-art{grid-column:2;height:170px;margin-top:3px}.project-copy h3{font-size:18px}.project-note{margin-left:34px;line-height:1.7}.timeline-item{grid-template-columns:105px 1fr;gap:10px}.timeline-item>small{font-size:7px}.certifications{grid-template-columns:1fr;gap:10px;margin-top:34px}.message-section{padding:70px 0 75px}.message-heading .section-title{font-size:45px}.contact-panel{grid-template-columns:1fr}.contact-aside{padding:23px}.contact-form{padding:23px}.contact-aside>p{margin:17px 0}.social-links{margin-top:10px}.site-footer{width:89vw;justify-content:space-between;gap:13px;padding:19px 0}.copyright{order:3;width:100%}.footer-links{gap:9px;font-size:7px}.theme-toggle{margin-left:0;font-size:7px;padding:8px}}
@media(max-width:380px){.main-nav{gap:8px}.main-nav a:first-child{display:none}.hero-skills{letter-spacing:.4px}.timeline-item{grid-template-columns:88px 1fr}.footer-links{gap:7px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}