/* 100 Thin */
/* 200 Extra Light / Ultra Light */
/* 300 Light */
/* 400 Normal / Regular */
/* 500 Medium */
/* 600 Semi Bold / Demi Bold */
/* 700 Bold */
/* 800 Extra Bold / Ultra Bold */
/* 900 Black / Heavy */

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit[wght].woff2') format('woff2');
    font-weight: 200 900;
    font-style: normal;
    font-display: block;
}

:root {
    --max-width: 1300px;
    --header-height: 120px;
    --padding-horizontal: 30px;
    --blur-layer-height: 1px;

    --bg: #19191F;
    --bg-secondary: #2D2D40;
    --text-primary: #FFFFFF;
    --text-secondary: #999999;
    --card-background: #24242E;
    --accent: #C4AC57;
    --accent-light: #CEC08F;
    --footer: rgba(255, 255, 255, 0.1);




    /*--bg: #F4F4F0;           !* soft off-white *!*/
    /*--bg-secondary: #E8E8E2; !* slightly darker neutral for contrast *!*/
    /*--text-primary: #1E1E24; !* deep neutral for readability *!*/
    /*--text-secondary: #5E5E66; !* softer gray for secondary text *!*/
    /*--card-background: #E2E2DC; !* light card background *!*/
    /*--accent: #8A7736;       !* warm gold with enough contrast *!*/
    /*--accent-light: #B9A96C; !* lighter, softer gold highlight *!*/
    /*--footer: rgba(0, 0, 0, 0.2);*/

    --font: 'Outfit', sans-serif;
    --font-name-title: 900 180px 'Outfit';
    --font-highlight: 300 clamp(26px, 15px + 1.389vw, 32px) 'Outfit';
    --font-section-header-title: 200 clamp(38px, 20px + 2.315vw, 48px) 'Outfit';
    --font-section-header-meta: 400 20px/32px 'Outfit';
    --font-section-header-small-title: 600 24px 'Outfit';
    --font-section-header-small-meta: 400 16px/1.5 'Outfit';
    --font-title: 600 24px 'Outfit';
    --font-subtitle: 400 20px 'Outfit';
    --font-body: 400 18px/1.75 'Outfit';
    --font-body-bold: 700 18px 'Outfit';
    --font-caption: 400 16px/1.5 'Outfit';
    --font-link: 700 18px 'Outfit';
    --font-label: 700 16px 'Outfit';
}

.mtb-0 { margin-top: 0; margin-bottom: 0; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mtb-4 { margin-top: 4px; margin-bottom: 4px; }
.mt-4 { margin-top: 4px; }
.mb-4 { margin-bottom: 4px; }
.mtb-8 { margin-top: 8px; margin-bottom: 8px; }
.mt-8 { margin-top: 8px; }
.mb-8 { margin-bottom: 8px; }
.mtb-12 { margin-top: 12px; margin-bottom: 12px; }
.mt-12 { margin-top: 12px; }
.mb-12 { margin-bottom: 12px; }
.mtb-16 { margin-top: 16px; margin-bottom: 16px; }
.mt-16 { margin-top: 16px; }
.mb-16 { margin-bottom: 16px; }
.mtb-24 { margin-top: 24px; margin-bottom: 24px; }
.mt-24 { margin-top: 24px; }
.mb-24 { margin-bottom: 24px; }

::selection {
    background: var(--accent);
    color: var(--bg);
    text-shadow: none;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
}

body {
    padding: 0;
    background: var(--bg);
    color: var(--text-primary);
    font: var(--font-body);
    margin: 0 0 50px;
    overflow-x: hidden;
    /*overscroll-behavior: none;*/
}

section {
    max-width: var(--max-width);
    padding: 0 var(--padding-horizontal);
    margin: auto;
}

main {}

footer {
    max-width: var(--max-width);
    margin: 0 auto 168px auto;
    border-top: 1px solid var(--footer);
    padding-top: 48px;
    text-align: center;
}
footer .links {
    margin-top: 24px;
    user-select: none;
    -webkit-user-select: none;
}
footer a {
    font: var(--font-caption);
}
footer .logo {
    display: inline-block;
    transition: transform 0.2s ease, filter 0.2s ease;
    cursor: crosshair;
}
footer .logo.pop {
    /*transform: scale(1.15);*/
}
footer .logo path {
    transition: stroke 0.5s ease;
}

a {
    color: var(--text-primary);
    text-decoration: underline;
    font: var(--font-link);
}

a:visited {
    color: var(--text-primary);
}

a:hover,
a:focus,
a:active {
    color: var(--text-primary);
    text-decoration: underline;
}

ol {
    list-style-position: inside;
    padding-left: 0;
}
ol li {
    display: list-item;
    padding-left: 1.2em;
    text-indent: -1.2em;
}
ul {
    list-style-position: inside;
    padding-left: 0;
}
ul li {
    display: list-item;
    padding-left: 1.5em;
    text-indent: -1.5em;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.tag {
    display: inline-block;
    font: var(--font-label);
    padding: 4px 10px;
    background-color: var(--accent);
    color: var(--bg);
}

.accent {
    color: var(--accent);
}

.pp {
    perspective: 1000px;
}

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

.hover-draw .base-path {
    stroke-dasharray: 365.09;
    stroke-dashoffset: 365.09;
}
.hover-draw.animate-once .base-path {
    animation: draw-base 1s ease forwards;
}
.hover-draw .accent-path {
    stroke-dasharray: 365.09;
    stroke-dashoffset: 365.09; /* hidden by default */
    transition: stroke-dashoffset 0.8s ease;
}
.hover-draw:hover .accent-path {
    stroke-dashoffset: 0;
}
.hover-draw:not(:hover) .accent-path {
    stroke-dashoffset: 365.09;
}
@keyframes draw-base {
    to {
        stroke-dashoffset: 0;
    }
}

.site-header {
    width: 100%;
    position: fixed;
    top: 0;
    overflow: visible;
    display: flex;
    flex-direction: column; /* Important for height to grow with content */
    z-index: 3000;
}

.site-header .main-blur {
    position: absolute;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    background-blend-mode: overlay;
    isolation: isolate;
    backface-visibility: hidden;
    pointer-events: none;
    z-index: 1000;
    inset: 0;
    align-items: center;
    width: 100%;
    height: 200%;
    background: rgba(0, 0, 0, 0);
    transition: background 0.25s ease;
    mask-image: linear-gradient(
            to bottom,
            black 0% 50%,
            transparent 50% 100%
    );
}
.site-header.scrolled .main-blur {
    background: rgba(0, 0, 0, 0.2);
}

.site-header .line-blur {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(var(--blur-layer-height) * 20);
    pointer-events: none;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    -webkit-backdrop-filter: blur(80px);
    backdrop-filter: blur(80px);
    mask-image: linear-gradient(
            to bottom,
            black 0% 5%,
            transparent 5% 100%
    );
}

.site-header nav {
    max-width: var(--max-width);
    padding: 0 var(--padding-horizontal);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 3000;
    width: 100%;
}
.site-header .nav-top {
    display: flex;
    align-items: center;
    min-height: var(--header-height);
}

.site-header .hamburger {
    font-size: 2rem;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    display: none;
    z-index: 5000;
}

.site-header .nav-items {
    display: flex;
    gap: 48px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-header a {
    font-weight: 400;
    text-decoration: none;
}

.site-header a.active {
    color: var(--accent);
}

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

.hero {
    text-align: center;
    margin-top: calc(var(--header-height) + 80px);
    padding-bottom: 160px;
}

.hero .headline {
    font-size: 24px;
    font-weight: 300;
    color: var(--text-secondary);
    margin-bottom: 35px;
}

.hero h1 {
    display: inline-block;

    /*
    https://fluid.style/spacing?min=65&max=180&min-bp=768&max-bp=1200&unit=%22px%22
    */
    font-size: clamp(65px, -139px + 26.62vw, 180px);
    line-height: clamp(65px, -139px + 26.62vw, 180px);

    font-weight: 900;
    /*font-size: 12rem;*/
    /*line-height: 12rem;*/
    color: transparent;
    margin-bottom: clamp(24px, -19px + 5.556vw, 48px);

    background: linear-gradient(0deg, var(--accent), var(--accent));

    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    transition: transform 0.15s ease-out;
    transform-style: preserve-3d;
    will-change: transform;
}

.hero .arrow {
    display: inline-block;
    margin-bottom: 48px;
}

.hero .arrow svg {
    width: clamp(35px, -27px + 8.102vw, 70px);
    color: var(--accent);
}

.hero .subline {
    font-size: 24px;
    margin-bottom: 30px;
}

/* ----- SECTION ----- */

.section {
    scroll-margin-top: calc(var(--header-height) + 32px);
    padding-bottom: 200px;
}

section-header {
    display: block;
    margin-bottom: 48px;
}
section-header .meta {
    display: flex;
    align-items: center;
    font: var(--font-section-header-meta);
    gap: 0.5rem;
    margin-bottom: 4px;
}
section-header .dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: var(--accent);
    border-radius: 50%;
}
section-header .title {
    font: var(--font-section-header-title);
}

section-header-small {
    display: block;
    /*margin-top: 72px;*/
    margin-bottom: 8px;
}
section-header-small .meta {
    display: flex;
    align-items: center;
    font: var(--font-section-header-small-meta);
    color: var(--text-secondary);
    gap: 0.5rem;
    margin-bottom: 8px;
}
section-header-small .title {
    font: var(--font-section-header-small-title);
}

/* ----- ABOUT ME ----- */

.about-container {
    display: flex;
    flex-wrap: wrap;
    gap: 80px;
}

.about-avatar {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-avatar img {
    object-fit: cover;
    border-radius: 100px;
    width: 260px;
    height: 260px;
}

.about-text-grid {
    flex: 2 1 700px;
    display: grid;
    gap: 48px;
    grid-template-columns: repeat(2, 1fr);
}

.about-text-grid .about-item {}

.about-text-grid .about-item.stretch {
    grid-column: span 2;
}

.about-text-grid .about-item h3 {
    font: var(--font-subtitle);
    line-height: 26px;
}

.about-text-grid .about-item p {
    margin-top: 12px;
}

/* ----- WORK EXPERIENCE ----- */

.experience-container {
    display: flex;
    flex-direction: column;
}

.experience-container experience-timeline-item {
    display: flex;
    flex-direction: column;
}
experience-timeline-item .top-row,
experience-timeline-item .bottom-row {
    display: grid;
    grid-template-columns: 250px 20px 1fr;
    /*align-items: center;*/
}
experience-timeline-item .date {
    font: var(--font-body-bold);
    align-self: center;
}
experience-timeline-item .logo {
    padding-left: 96px;
    align-self: center;
}
experience-timeline-item .logo img {
    height: 70px;
    object-fit: contain;
}
experience-timeline-item .line {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}
experience-timeline-item .line-empty {
     width: 1px;
     background: rgba(0, 0, 0, 0);
     flex: 1;
     justify-self: center;
 }
experience-timeline-item .line-top,
experience-timeline-item .line-bottom {
    width: 1px;
    background: var(--text-primary);
    flex: 1;
    justify-self: center;
}
experience-timeline-item:first-child .line-top {
    background: rgba(0, 0, 0, 0);
}
experience-timeline-item:last-child .line-bottom {
    background: rgba(0, 0, 0, 0);
}
experience-timeline-item .line-connector {
    width: 1px;
    background: var(--text-primary);
    justify-self: center;
}
experience-timeline-item .dot {
    width: 12px;
    height: 12px;
    background: var(--accent);
    transform: rotate(45deg);
    z-index: 1;
}
experience-timeline-item .content {
    padding-left: 96px;
}
experience-timeline-item .content .date {
    display: none;
    margin-bottom: 16px;
}
experience-timeline-item .content h3 {
    font: var(--font-title);
    margin-bottom: 8px;
}
experience-timeline-item .content .company {
    font: var(--font-caption);
    color: var(--text-secondary);
    margin-bottom: 8px;
}
experience-timeline-item .content p {
    margin-bottom: 64px;
}

/* ----- WORK ----- */

.work-container {
    display: grid;
    gap: 54px;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

project-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease;
    will-change: transform;
    -webkit-font-smoothing: subpixel-antialiased;
    backface-visibility: hidden;
    transform: translateZ(0);

}

project-item:hover {
    transform: scale(1.01);
}

project-item .item-link {
    position: absolute;
    inset: 0;
    z-index: 1000;
}

project-item > *:not(.item-link) {
    position: relative;
    z-index: 2;
}

project-item img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: fill;
    background: #2C2C34;
    margin-bottom: 24px;
}

project-item .tags {
    margin-bottom: 16px;
}

project-item h3 {
    font: var(--font-title);
    margin-bottom: 8px;
}

project-item .meta {
    font: var(--font-caption);
    color: var(--text-secondary);
    margin-bottom: 16px;
}

project-item .desc {
    margin-bottom: 16px;
}

project-item a {
    color: var(--accent) !important;
}

/* ----- TESTIMONIALS ----- */

.testimonials-container {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    overflow-x: hidden;
    user-select: none;
    -webkit-user-select: none;
}

.testimonials-scroll {
    display: flex;
    gap: 30px;
    padding-left: calc((100vw - var(--max-width) + var(--padding-horizontal) * 2) / 2);
    padding-right: calc((100vw - var(--max-width) + var(--padding-horizontal) * 2) / 2);
    overflow-x: auto;
    scrollbar-width: none;
    cursor: grab;
}

.testimonials-scroll:active {
    cursor: grabbing;
}

.testimonials-scroll::-webkit-scrollbar {
    display: none;
}

testimonial-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 0 0 450px;
    max-width: 100%;
    background-color: var(--card-background);
    border-radius: 16px;
    padding: 36px;
}

.quote-icon {
    font-size: 14rem;
    line-height: 0.8;
    font-weight: bold;
    color: var(--bg);
    text-align: right;
    margin-bottom: -3rem;
}

.testimonial-text {
    flex: 1;
    margin-bottom: 50px;
}

.author {
    display: flex;
    align-items: center;
    gap: 24px;
}

.author img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.author .name {
    font: var(--font-body-bold);
}

.author .title {
    font: var(--font-caption);
    color: var(--text-secondary);
}

@media (max-width: 1300px) {
    /*.hero h1 {*/
    /*    font-size: clamp(80px, 4vw + 1rem, 180px);*/
    /*    line-height: clamp(80px, 4vw + 1rem, 180px);*/
    /*}*/
    .testimonials-scroll {
        padding-left: var(--padding-horizontal);
        padding-right: var(--padding-horizontal);
    }
}

@media (max-width: 768px) {

    :root {
        --header-height: 80px;
    }

    .site-header {
        height: auto;
    }

    .site-header .main-blur {
        background: rgba(0, 0, 0, 0.2);
    }

    .site-header nav {
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
    }
    .site-header .nav-top {
        width: 100%;
        justify-content: space-between;
    }

    .nav-top .logo svg {
        height: 36px;
    }

    .site-header .hamburger {
        display: block;
    }

    .site-header .nav-items {
        flex-direction: column;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: all 0.35s ease;
        gap: 0;
    }
    .site-header .nav-items.show {
        max-height: 500px;
        opacity: 1;
        padding-bottom: 16px;
    }
    .site-header li a {
        display: block;
        padding: 16px 0;
    }

    .hero {
        padding-bottom: 96px;
    }

    .work-container {
        grid-template-columns: 1fr;
    }

    .section {
        padding-bottom: 100px;
    }

    section-header {
        margin-bottom: 32px;
    }

    experience-timeline-item .top-row,
    experience-timeline-item .bottom-row {
        grid-template-columns: 20px 1fr;
    }
    experience-timeline-item .logo {
        padding-left: 48px;
    }
    experience-timeline-item .date {
        display: none;
    }
    experience-timeline-item .content {
        padding-left: 48px;
    }
    experience-timeline-item .content .date {
        display: block;
    }
    experience-timeline-item .spacer {
        display: none;
    }

    .about-container {
        flex-direction: column;
        align-items: center;
        gap: 48px;
    }
    .about-text-grid {
        flex: 1;
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .about-text-grid .about-item.stretch {
        grid-column: 1;
    }

    testimonial-card {
        max-width: 90%;
    }

    .quote-icon {
        font-size: 10rem;
        margin-bottom: -2rem;
    }
}