body {
    margin: 0;
    min-height: 100vh;
    font-family: "Space Grotesk", sans-serif;

    background: transparent;
    color:var(--dark);
}

body::after{
    content:"";
    position:fixed;

    top:-10%;
    left:-10%;

    width:120%;
    height:120%;

    background: url("../images/background.png");

    background-size:cover;
    background-position:50% 50%;
    background-repeat:no-repeat;

    z-index:-2;

    transform:
        scale(1.1)
        translate(var(--move-x), var(--move-y));
}

/* ---------- HEADER ---------- */

.skip-link{
    position:fixed;
    top:12px;
    left:12px;
    z-index:1100;
    padding:12px 16px;
    border-radius:12px;
    background:var(--white);
    box-shadow:0 12px 35px rgba(21,36,69,.18);
    transform:translateY(-150%);
    transition:transform .2s ease;
}

.skip-link:focus{
    transform:translateY(0);
}

header{
    width:var(--container);
    margin:auto;
    min-height:90px;
    padding:18px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top: 20px;
    position:relative;
    z-index:1;
}

.logo small{
    font-family:"IBM Plex Mono",monospace;
    color:var(--gray);
    letter-spacing:2px;
    line-height:1.4;
}

.logo h1{
    font-size:2rem;
}

nav{
    display:flex;
    gap:40px;
}

nav a{
    transition:.3s;
    padding:10px 2px;
    text-underline-offset:6px;
}

nav a:hover,
nav a.is-active{
    color:var(--blue);
}

nav a.is-active{
    text-decoration:underline;
    text-decoration-thickness:2px;
}

.status{
    display:flex;
    align-items:center;
    gap:10px;
    white-space:nowrap;
}

.dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#41ff87;
}

/* ---------- HERO ---------- */

.hero{
    width:var(--container);
    margin:clamp(64px, 6vw, 80px) auto var(--section-space);
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:80px;
    align-items:center;
}

.eyebrow{
    font-family:"IBM Plex Mono";
    color:var(--blue);
    letter-spacing:2px;
    margin-bottom:20px;
}

.hero h2{
    max-width:780px;
    font-size:clamp(3.5rem, 5.6vw, 5rem);
    line-height:.95;
    margin-bottom:30px;
}

.description{
    max-width:550px;
    color:rgba(21,36,69,.82);
    line-height:1.7;
    font-weight:bold;
}

.buttons{
    margin-top:45px;
    display:flex;
    gap:20px;
}

.buttons a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:16px 28px;
    border-radius:999px;
    background:white;
    box-shadow:0 12px 30px rgba(42,93,255,.08);
    transition:transform .25s ease, box-shadow .25s ease, color .25s ease;
}

.buttons a:hover{
    color:var(--blue);
    transform:translateY(-2px);
    box-shadow:0 16px 35px rgba(42,93,255,.14);
}

.hero-right{
    padding:35px;
    position:relative;
    overflow:hidden;

    backdrop-filter:blur(25px);
    -webkit-backdrop-filter:blur(25px);

    background:rgba(255,255,255,.42);
    border:1px solid rgba(255,255,255,.65);

    box-shadow:
        0 20px 60px rgba(42,93,255,.10),
        inset 0 1px rgba(255,255,255,.7);

    border-radius:var(--radius);
}

.picture img{
    width:100%;
    height:auto;
    aspect-ratio:832 / 1424;
    border-radius:14px;
    object-fit:cover;
}

.portrait-caption{
    position:absolute;
    left:48px;
    right:48px;
    bottom:48px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:12px 14px;
    border:1px solid rgba(255,255,255,.72);
    border-radius:12px;
    background:rgba(255,255,255,.72);
    color:var(--dark);
    font-family:"IBM Plex Mono", monospace;
    font-size:.7rem;
    letter-spacing:.06em;
}

.portrait-caption span:last-child{
    color:var(--blue);
    white-space:nowrap;
}

/* ---------- PROJECTS ---------- */

.projects{
    width:var(--container);
    margin:var(--section-space) auto;
}

.section-title{
    font-size:clamp(1.75rem, 2.5vw, 2rem);
    font-weight:400;
    line-height:1.2;
    margin-bottom:40px;
    display:grid;
    grid-template-columns:auto auto minmax(40px, 1fr);
    align-items:center;
    gap:16px;
}

.section-title::after{
    content:"";
    height:1px;
    margin-left:8px;
    background:linear-gradient(90deg, var(--border), transparent);
}

.section-index,
.project-kicker,
.system-index{
    color:var(--blue);
    font-family:"IBM Plex Mono", monospace;
    font-size:.75rem;
    font-weight:500;
    letter-spacing:.12em;
}

.grid{
    display:grid;
    grid-template-columns:minmax(0, 1.7fr) minmax(280px, 1fr);
    gap:35px;
    align-items:stretch;
}

.project-link{
    display:block;
    height:100%;
    min-width:0;
}

.project-body{
    position:relative;
    transition:.4s;
    padding:35px;
    height:100%;
    border-radius:var(--radius);
    display:flex;
    flex-direction:column;
    min-width:0;
}
.project-body::before{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:inherit;
    background:linear-gradient(135deg, rgba(255,255,255,.45), rgba(70,120,255,.18));
    opacity:0;
    transition:.5s;
    z-index:-1;
}
.project-body:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 80px rgba(55,105,255,.20);
}
.project-body:hover::before{
    opacity:1;
}

.thumbnail{
    width:100%;
    aspect-ratio:16 / 9;
    border-radius:18px;
    background:#dfe9ff;
    margin-bottom:25px;
    display: flex;
    justify-content: center; /* Horizontal */
    align-items: center;     /* Vertical */
    min-width:0;
}

.project-featured .thumbnail{
    aspect-ratio:16 / 8.5;
}

.project-placeholder .thumbnail{
    flex:1;
    min-height:260px;
}

.thumbnail img{
    width: 100%;
    height: 100%;
    object-fit:cover;
    border-radius:inherit;
    min-width:0;
}

.thumbnail .placeholder-mark{
    color: var(--blue);
    font-size:80px;
    line-height:1;
}

.project-body h3{
    margin-bottom:8px;
    font-size:1.4rem;
}

.project-body p{
    color:var(--gray);
}

.project-copy{
    position:relative;
    padding-top:24px;
    min-width:0;
}

.project-kicker{
    margin-bottom:10px;
    text-transform:uppercase;
}

.project-action{
    position:absolute;
    right:0;
    bottom:0;
    color:var(--blue);
    font-family:"IBM Plex Mono", monospace;
    font-size:.8rem;
    transition:transform .25s ease;
}

.project-link:hover .project-action{
    transform:translate(2px, -2px);
}

/* ---------- SYSTEMS ---------- */

.systems{
    width:var(--container);
    margin:var(--section-space) auto;
}

.systems-grid{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:35px;
}

.system-card--primary{
    grid-column:span 7;
}

.system-card--secondary{
    grid-column:span 5;
}

.system-card--wip{
    grid-column:1 / -1;
}

.system-card{
    padding:30px;

    display:flex;
    flex-direction:column;
    gap:20px;

    min-height:300px;
}

.system-card h3{
    font-size:1.5rem;
    margin-bottom:12px;
}

.system-card p{
    color:var(--gray);
    line-height:1.7;
}

.system-icon{
    width:55px;
    height:55px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:16px;

    background:rgba(62,107,255,.12);
    color:var(--blue);

    font-size:2rem;
}

.tags{
    margin-top:auto;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.tags span{
    padding:8px 14px;

    border-radius:999px;

    font-family:"IBM Plex Mono";
    font-size:.8rem;

    background:rgba(62,107,255,.12);
    color:var(--blue);
}

/* ---------- ABOUT ---------- */
.about{
    width:var(--container);
    margin:var(--section-space) auto;
}

.about-body {
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:24px;
}

.resume, .education {
    padding:30px;
    display: flex;
    flex-direction: column;
}

.skills {
    padding:30px;
    display: flex;
    flex-direction: column;
}

.resume p, .education p, .skills p{
    margin-top: 10px;
    line-height: 1.6;
}

.resume{
    grid-column:1 / 8;
    grid-row:1 / 3;
}

.skills,
.education{
    grid-column:8 / -1;
}

.system-card-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.system-card--wip .system-card-heading{
    justify-content:flex-start;
}

.system-card.system-card--wip{
    min-height:0;
    display:grid;
    grid-template-columns:80px minmax(0,1fr) auto;
    align-items:center;
    gap:24px;
    padding-block:22px;
}

.system-card-copy{
    max-width:62ch;
}

.system-index{
    color:var(--gray);
}

.system-card--wip .system-index{
    display:none;
}

.system-card--wip .system-card-copy h3{
    margin-bottom:4px;
}

.system-card--wip .tags{
    margin-top:0;
}

.about-body h3,
.contact-body h3{
    font-size:1.5rem;
}

.panel-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content:flex-start;
    margin-top: 10px;
}

.cv {
    padding-top: 35px;
    text-align: center;
    align-content: center;
}

.resume .cv{
    margin-top:auto;
    padding-top:24px;
    border-top:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    text-align:left;
}

.cv-label {
    margin-bottom:10px;
}

.resume .cv-label{
    margin-bottom:0;
    color:var(--gray);
}

.detail-list{
    list-style:none;
    display:grid;
    gap:12px;
    line-height:1.45;
}

.detail-list li{
    position:relative;
    padding-left:18px;
}

.detail-list li::before{
    content:"";
    position:absolute;
    top:.6em;
    left:0;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--blue);
    box-shadow:0 0 0 4px rgba(62,107,255,.1);
}

.skills-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.education-list li span{
    display:block;
    margin-top:6px;
    color:var(--gray);
    font-size:.9rem;
}

.download-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 14px 22px;

    text-decoration: none;
    color: white;

    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.15);

    background: rgba(25, 12, 204, 0.582);
    backdrop-filter: blur(12px);

    transition: .25s ease;
    min-height:48px;
}

.download-btn img {
    width: 18px;
    height: 18px;
}

.download-btn:hover {
    background: rgba(19, 4, 233, 0.582);
    transform: translateY(-2px);
}

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

/* ---------- CONTACT ---------- */

.contact{
    width:var(--container);
    margin:var(--section-space) auto;
}

.contact-body{
    display:grid;
    grid-template-columns:1fr 1.3fr;
    gap:40px;
}

.contact-info,
.contact-panel{
    padding:35px;

    backdrop-filter:blur(25px);
    -webkit-backdrop-filter:blur(25px);

    background:rgba(255,255,255,.42);
    border:1px solid rgba(255,255,255,.65);

    box-shadow:
        0 20px 60px rgba(42,93,255,.10),
        inset 0 1px rgba(255,255,255,.7);

    border-radius:var(--radius);
}

.contact-panel{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.contact-info{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.contact-info h3{
    margin-bottom:10px;
}

.contact-info > p,
.contact-panel > p{
    max-width:58ch;
    color:rgba(21,36,69,.78);
    line-height:1.65;
}

.contact-item{
    display:grid;
    grid-template-columns:48px minmax(0,1fr);
    align-items:start;
    gap:14px;
    padding:14px;
    border:1px solid rgba(62,107,255,.12);
    border-radius:14px;
    background:rgba(255,255,255,.24);
    transition:background .25s ease, border-color .25s ease, transform .25s ease;
}

.contact-item:hover{
    transform:translateX(3px);
    border-color:rgba(62,107,255,.24);
    background:rgba(255,255,255,.4);
}

.contact-icon{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:rgba(62,107,255,.12);
    color:var(--blue);
    font-family:"IBM Plex Mono", monospace;
    font-size:.88rem;
    font-weight:500;
}

.contact-icon--status .dot{
    width:10px;
    height:10px;
}

.contact-item-copy{
    min-width:0;
    padding-top:2px;
}

.contact-item h4{
    font-size:.95rem;
    font-family:"IBM Plex Mono", monospace;
}

.contact-item a{
    transition:var(--transition);
}

.contact-item a:hover{
    color:var(--blue);
    text-decoration:underline;
    text-underline-offset:4px;
}

.status-list{
    padding-left:18px;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.contact-form{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.form-row{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}

.form-group{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.form-group label{
    font-weight:600;
    color:var(--dark);
}

.form-group label span{
    color:var(--gray);
    font-weight:400;
}

.contact-form input,
.contact-form select,
.contact-form textarea{
    width:100%;
    padding:16px 18px;

    font:inherit;
    color:var(--dark);

    border-radius:14px;
    border:1px solid rgba(62,107,255,.18);

    background:rgba(255,255,255,.55);
    backdrop-filter:blur(12px);

    outline:none;
    transition:var(--transition);
}

.contact-form textarea{
    resize:vertical;
    min-height:180px;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
    color:var(--gray);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
    border-color:var(--blue);
    box-shadow:0 0 0 4px rgba(62,107,255,.15);
}

.contact-form button{
    align-self:flex-start;

    padding:14px 24px;

    color:white;
    font-weight:600;

    border:none;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.15);

    background:rgba(25,12,204,.58);
    backdrop-filter:blur(12px);

    cursor:pointer;
    transition:.25s ease;
    min-height:48px;
}

.contact-form button:disabled{
    cursor:wait;
    opacity:.65;
    transform:none;
}

#contactStatus{
    min-height:1.5em;
    color:var(--gray);
    line-height:1.5;
}

#contactStatus[data-state="success"]{
    color:#176c3a;
}

#contactStatus[data-state="error"]{
    color:#8f2434;
}

.contact-form button:hover{
    background:rgba(19,4,233,.58);
    transform:translateY(-2px);
}

.contact-form button:active{
    transform:translateY(0);
}

.hidden-div{
    position:absolute;
    left:-9999px;
    width:1px;
    height:1px;
    overflow:hidden;
}

/* ---------- FOOTER ---------- */

footer {
    display: flex;
    justify-content: space-between;
    width:var(--container);
    margin:auto;
    min-height:86px;
    padding:24px 20px;
    align-items: center;
    margin-bottom: 20px;
}

.socials{
    display:flex;
    gap:18px;
}

.socials a{
    color:white;
    transition:.25s;
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:12px;
}

.socials a:hover{
    color:var(--blue);
    transform:translateY(-4px);
}

.socials img{
    width:24px;
    height:24px;
    display:block;
}

footer p{
    color:var(--gray);
    line-height:1.5;
}

section{
    scroll-margin-top:24px;
}

@media (max-width:1100px){
    nav{
        gap:clamp(18px, 2.4vw, 32px);
    }

    .hero{
        grid-template-columns:minmax(0, 1.55fr) minmax(280px, .8fr);
        gap:48px;
    }

    .about-body{
        gap:24px;
    }

    .grid{
        grid-template-columns:minmax(0, 1.5fr) minmax(260px, 1fr);
    }
}

@media (max-width:900px){
    :root{
        --container:min(92%, 720px);
    }

    header{
        display:grid;
        grid-template-columns:minmax(0, 1fr) auto;
        gap:14px 20px;
        position:relative;
        top:auto;
    }

    .logo h1{
        font-size:1.65rem;
    }

    nav{
        grid-column:1 / -1;
        grid-row:2;
        width:100%;
        justify-content:space-between;
        gap:12px;
        padding-top:10px;
        border-top:1px solid var(--border);
    }

    .status{
        grid-column:2;
        grid-row:1;
    }

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

    .hero-left{
        max-width:680px;
    }

    .hero-right{
        width:min(100%, 430px);
        justify-self:center;
    }

    .picture img{
        aspect-ratio:4 / 5;
        height:clamp(380px, 70vh, 540px);
        object-position:center 30%;
    }

    .contact-body{
        grid-template-columns:1fr;
    }

    .systems-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:24px;
    }

    .grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:24px;
    }

    .system-card--primary,
    .system-card--secondary{
        grid-column:span 1;
    }

    .system-card--wip{
        grid-column:1 / -1;
    }

    .resume{
        grid-column:1 / -1;
        grid-row:auto;
    }

    .skills{
        grid-column:1 / 5;
    }

    .education{
        grid-column:5 / -1;
    }

    .skills-list{
        grid-template-columns:1fr;
    }

    section{
        scroll-margin-top:24px;
    }
}

@media (max-width:650px){
    :root{
        --container:calc(100% - 32px);
        --section-space:72px;
        --radius:18px;
    }

    header{
        margin-top:12px;
        padding:16px;
    }

    .logo small{
        display:block;
        max-width:190px;
        font-size:.68rem;
        letter-spacing:1.3px;
    }

    .logo h1{
        font-size:1.45rem;
    }

    .status{
        gap:7px;
        font-size:.82rem;
    }

    .dot{
        width:8px;
        height:8px;
    }

    nav{
        gap:6px;
    }

    nav a{
        min-height:40px;
        display:inline-flex;
        align-items:center;
        font-size:.78rem;
    }

    .hero{
        margin-top:48px;
        gap:40px;
    }

    .eyebrow{
        margin-bottom:16px;
        font-size:.82rem;
    }

    .hero h2{
        font-size:clamp(2.65rem, 13vw, 3.6rem);
        line-height:.98;
        margin-bottom:24px;
    }

    .description{
        line-height:1.65;
    }

    .buttons{
        margin-top:32px;
    }

    .hero-right,
    .project-body,
    .system-card,
    .resume,
    .skills,
    .education,
    .contact-info,
    .contact-panel{
        padding:22px;
    }

    .grid,
    .systems-grid{
        grid-template-columns:1fr;
        gap:22px;
    }

    .section-title{
        margin-bottom:28px;
    }

    .system-card{
        min-height:0;
    }

    .system-card--primary,
    .system-card--secondary,
    .system-card--wip,
    .resume,
    .education,
    .skills{
        grid-column:1;
    }

    .system-card.system-card--wip{
        display:flex;
        align-items:stretch;
        padding:22px;
    }

    .project-action{
        position:static;
        display:inline-block;
        margin-top:16px;
    }

    .project-placeholder .thumbnail{
        min-height:220px;
    }

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

    .resume .cv{
        align-items:flex-start;
        flex-direction:column;
    }

    .form-row{
        grid-template-columns:1fr;
        gap:20px;
    }

    .portrait-caption{
        left:34px;
        right:34px;
        bottom:34px;
        font-size:.64rem;
    }

    .contact-panel,
    .contact-info,
    .contact-form{
        gap:20px;
    }

    .contact-form input,
    .contact-form select,
    .contact-form textarea{
        padding:14px 15px;
    }

    .contact-form button{
        width:100%;
    }

    footer{
        min-height:0;
        margin-bottom:16px;
        flex-direction:column;
        gap:20px;
        text-align:center;
    }

    .socials{
        width:100%;
        justify-content:center;
        flex-wrap:wrap;
        gap:8px;
    }
}

@media (max-width:360px){
    .logo h1{
        font-size:1.25rem;
    }

    .status{
        font-size:.75rem;
    }

    nav{
        gap:2px;
    }

    nav a{
        padding-inline:0;
        font-size:.7rem;
    }
}