@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;1,400;1,600&family=Caveat:wght@400;600&family=DM+Sans:wght@300;400;500&display=swap');

:root {
    /* colours */
    --cream: #FDF7EF;
    --warm: #F5E6C8;
    --sand: #E8D0A0;
    --terra: #C2714F;
    --rust: #9B4F2A;
    --brown: #3D2314;
    --sage: #6B8F5E;
    --rose: #D4847A;
    --ink: #2C1A0E;
    --muted: #8B6F5A;
    /* type scale*/
    --text-xs: clamp(.72rem, 1.2vw, .82rem);
    --text-sm: clamp(.82rem, 1.4vw, .95rem);
    --text-base: clamp(.9rem, 1.5vw, 1.05rem);
    --text-lg: clamp(1rem, 1.8vw, 1.2rem);
    --text-xl: clamp(1.1rem, 2vw, 1.45rem);
    --text-2xl: clamp(1.4rem, 2.5vw, 2rem);
    --text-3xl: clamp(1.8rem, 3.5vw, 2.2rem);
    --text-hero: clamp(2.6rem, 6vw, 5.4rem);
    /* spacing scale */
    --sp-xs: clamp(.35rem, .8vw, .5rem);
    --sp-sm: clamp(.6rem, 1.2vw, .85rem);
    --sp-md: clamp(1rem, 2vw, 1.5rem);
    --sp-lg: clamp(1.5rem, 3vw, 2.5rem);
    --sp-xl: clamp(2rem, 4vw, 3.5rem);
    --sp-2xl: clamp(3rem, 6vw, 5rem);
    --sp-3xl: clamp(4rem, 7vw, 7rem);
    /* section inline padding — shrinks gracefully */
    --pad-x: clamp(1.25rem, 5vw, 5rem);
    /* card / radius */
    --radius-sm: clamp(8px, 1.5vw, 14px);
    --radius-md: clamp(14px, 2vw, 20px);
    --radius-lg: clamp(18px, 2.5vw, 28px);
}

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

html {
    scroll-behavior: smooth
}

body {
    background: var(--cream);
    color: var(--ink);
    font-family: 'DM Sans', sans-serif;
    overflow-x: hidden;
    font-size: var(--text-base);
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1000;
    opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}

/* NAV */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-md) var(--pad-x);
    position: sticky;
    top: 0;
    z-index: 200;
    background: rgba(253, 247, 239, .96);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(194, 113, 79, .12);
}

.logo a {
    font-family: 'Caveat', cursive;
    font-size: var(--text-xl);
    color: var(--rose);
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
    text-decoration: none;
}

.logo img {
    width: clamp(28px, 4vw, 40px);
    height: clamp(28px, 4vw, 40px);
    object-fit: contain
}

.nav-links {
    display: flex;
    gap: var(--sp-lg);
    align-items: center
}

.nav-links a {
    text-decoration: none;
    color: var(--brown);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: color .2s;
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 1.5px;
    background: var(--terra);
    transition: width .25s;
}

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

.nav-links a:hover::after {
    width: 100%
}

/* HERO */
.hero {
    width: 100%;
    background: var(--cream);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

.hero-text-zone {
    width: 100%;
    max-width: 860px;
    padding: var(--sp-3xl) var(--pad-x) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2;
}

.hero-doodles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0
}

.hello-tag {
    font-family: 'Caveat', cursive;
    font-size: var(--text-lg);
    color: var(--terra);
    margin-bottom: var(--sp-sm);
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
    position: relative;
    z-index: 1;
}

.hero-text-zone h1 {
    font-family: 'Lora', serif;
    font-size: var(--text-hero);
    line-height: 1.08;
    color: var(--terra);
    font-weight: 600;
    margin-bottom: var(--sp-md);
    position: relative;
    z-index: 1;
}

.hero-text-zone p {
    font-size: var(--text-base);
    line-height: 1.8;
    color: var(--muted);
    max-width: 500px;
    margin-bottom: var(--sp-lg);
    position: relative;
    z-index: 1;
}

.hero-btns {
    display: flex;
    gap: var(--sp-md);
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
    padding-bottom: var(--sp-sm);
}

.btn-main {
    background: var(--terra);
    color: #fff;
    padding: var(--sp-sm) var(--sp-lg);
    border-radius: 100px;
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    border: 2px solid var(--terra);
    transition: all .22s;
}

.btn-main:hover {
    background: transparent;
    color: var(--terra);
    transform: translateY(-2px)
}

.btn-sec {
    font-family: 'Caveat', cursive;
    font-size: var(--text-lg);
    color: var(--terra);
    text-decoration: none;
    border-bottom: 2px dotted var(--terra);
    padding-bottom: 1px;
    transition: opacity .2s;
}

.btn-sec:hover {
    opacity: .7
}

.hero-scene {
    width: 100%;
    line-height: 0;
    position: relative;
    z-index: 1
}

.hero-scene img {
    width: 100%;
    height: auto;
    display: block;
    mix-blend-mode: multiply;
    filter: saturate(1.05);
}

/* WAVY */
.wavy {
    width: 100%;
    line-height: 0;
    position: relative;
    z-index: 2
}

.wavy svg {
    display: block;
    width: 100%
}

/* SKILLS */
.skills {
    background: var(--warm);
    padding: var(--sp-2xl) var(--pad-x);
    position: relative;
    z-index: 2
}

.skills-inner {
    max-width: 1100px;
    margin: 0 auto
}

.skills-header {
    display: flex;
    align-items: flex-end;
    gap: var(--sp-md);
    margin-bottom: var(--sp-lg)
}

.skills-header h2 {
    font-family: 'Lora', serif;
    font-size: var(--text-2xl);
    color: var(--brown);
    font-weight: 600
}

.skills-header span {
    font-family: 'Caveat', cursive;
    font-size: var(--text-lg);
    color: var(--muted);
    padding-bottom: .25rem
}

.skill-grid2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(110px, 14vw, 140px), 1fr));
    gap: var(--sp-sm)
}

.skill-card {
    background: #fff;
    border: 1.5px solid var(--sand);
    border-radius: var(--radius-sm);
    padding: var(--sp-md) var(--sp-sm);
    text-align: center;
    transition: transform .2s, box-shadow .2s;
    cursor: default;
    position: relative;
    overflow: hidden;
}

.skill-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--warm);
    transform: translateY(100%);
    transition: transform .3s;
    z-index: 0;
    border-radius: var(--radius-sm);
}

.skill-card:hover {
    transform: translateY(-4px) rotate(-1deg);
    box-shadow: 4px 6px 0 var(--sand)
}

.skill-card:hover::before {
    transform: translateY(0)
}

.skill-card-icon {
    margin-bottom: var(--sp-xs);
    position: relative;
    z-index: 1;
    height: clamp(24px, 3.5vw, 32px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.skill-card-icon img {
    width: clamp(24px, 3.5vw, 32px);
    height: clamp(24px, 3.5vw, 32px);
    object-fit: contain
}

.skill-card-name {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--brown);
    position: relative;
    z-index: 1
}

/* ABOUT */
.about {
    padding: var(--sp-3xl) var(--pad-x);
    position: relative;
    z-index: 2
}

.about-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2xl);
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

.about-frame {
    position: relative;
    display: flex;
    justify-content: center
}

.doodle-circle {
    position: absolute;
    top: -25px;
    left: -25px;
    width: 80px;
    height: 80px;
    z-index: 0
}

.about-photo-wrap {
    position: relative;
    width: clamp(220px, 28vw, 300px)
}

.about-photo-card {
    width: 100%;
    aspect-ratio: 4/5;
    background: var(--warm);
    border: 2px solid var(--sand);
    border-radius: var(--radius-md);
    box-shadow: 6px 8px 0 var(--sand);
    overflow: hidden;
    transform: rotate(-1.5deg);
}

.about-photo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.about-sticky-note {
    position: absolute;
    bottom: -28px;
    right: -18px;
    background: #FFF9C4;
    border: 1px solid #E8D87A;
    padding: var(--sp-sm) var(--sp-md);
    border-radius: 3px;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, .06);
    transform: rotate(3deg);
    font-family: 'Caveat', cursive;
    font-size: var(--text-sm);
    color: #5C4A00;
    width: clamp(110px, 15vw, 135px);
    line-height: 1.5;
    z-index: 2;
}

.section-eyebrow {
    font-family: 'Caveat', cursive;
    font-size: var(--text-xl);
    color: var(--terra);
    margin-bottom: var(--sp-sm);
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
}

.about-text h2 {
    font-family: 'Lora', serif;
    font-size: var(--text-3xl);
    color: var(--brown);
    line-height: 1.25;
    margin-bottom: var(--sp-md);
    font-weight: 600;
}

.about-text h2 em {
    color: var(--terra);
    font-style: italic
}

.about-text p {
    font-size: var(--text-sm);
    line-height: 1.9;
    color: var(--muted);
    margin-bottom: var(--sp-sm)
}

.about-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-sm);
    margin-top: var(--sp-lg)
}

.chip {
    padding: var(--sp-xs) var(--sp-md);
    border-radius: 100px;
    font-family: 'Caveat', cursive;
    font-size: var(--text-base);
    border: 1.5px dashed;
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
}

.chip-a {
    background: #FFF3EC;
    color: var(--rust);
    border-color: #EFBFA8
}

.chip-b {
    background: #F0F5EE;
    color: var(--sage);
    border-color: #BBCFB5
}

.chip-c {
    background: #FDF6E3;
    color: #8B6914;
    border-color: #E8D5A3
}

.chip-d {
    background: #EEF4F8;
    color: #3D6080;
    border-color: #B8D0E0
}

/*PROJECTS */
.projects {
    padding: var(--sp-3xl) var(--pad-x);
    position: relative;
    z-index: 2
}

.projects-inner {
    max-width: 1100px;
    margin: 0 auto
}

.proj-header {
    margin-bottom: var(--sp-xl)
}

.proj-header h2 {
    font-family: 'Lora', serif;
    font-size: var(--text-3xl);
    color: var(--brown);
    font-weight: 600;
    margin-bottom: .3rem
}

.proj-header p {
    font-family: 'Caveat', cursive;
    font-size: var(--text-lg);
    color: var(--muted)
}

.proj-stack2 {
    display: flex;
    flex-direction: column;
    gap: var(--sp-md)
}

.proj-card2 {
    display: grid;
    grid-template-columns: clamp(56px, 8vw, 80px) 1fr auto;
    gap: var(--sp-lg);
    align-items: center;
    background: #fff;
    border: 1.5px solid var(--sand);
    border-radius: var(--radius-md);
    padding: var(--sp-lg) var(--sp-xl);
    text-decoration: none;
    color: inherit;
    transition: all .25s;
    position: relative;
    overflow: hidden;
}

.proj-card2::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: var(--terra);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .3s;
    border-radius: 4px 0 0 4px;
}

.proj-card2:hover {
    transform: translateX(5px);
    box-shadow: 0 8px 30px rgba(92, 61, 46, .09);
    border-color: rgba(194, 113, 79, .3)
}

.proj-card2:hover::after {
    transform: scaleY(1)
}

.proj-num2 {
    position: relative;
    height: clamp(80px, 12vw, 150px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.num-text {
    font-family: 'Caveat', cursive;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    color: var(--sand);
    font-weight: 600;
    transition: opacity .25s ease, transform .25s ease;
    z-index: 2;
}

.proj-num2 img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transform: scale(.9);
    transition: all .3s ease;
}

.proj-card2:hover .num-text {
    opacity: 0;
    transform: scale(.8)
}

.proj-card2:hover .proj-num2 img {
    opacity: 1;
    transform: scale(1)
}

.proj-body h3 {
    font-family: 'Lora', serif;
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--brown);
    margin-bottom: var(--sp-xs)
}

.proj-body p {
    font-size: var(--text-xs);
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: var(--sp-sm)
}

.proj-pills {
    display: flex;
    gap: var(--sp-xs);
    flex-wrap: wrap
}

.ppill {
    font-size: var(--text-xs);
    padding: .2rem .7rem;
    background: var(--warm);
    color: var(--rust);
    border-radius: 100px;
    border: 1px solid var(--sand)
}

.proj-arrow3 {
    font-size: var(--text-lg);
    color: var(--sand);
    transition: color .2s, transform .2s;
    flex-shrink: 0
}

.proj-card2:hover .proj-arrow3 {
    color: var(--terra);
    transform: translateX(4px)
}

/*CONTACT */
.contact {
    padding: var(--sp-3xl) var(--pad-x);
    position: relative;
    z-index: 2
}

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

.contact-box {
    background: var(--brown);
    border-radius: var(--radius-lg);
    padding: var(--sp-2xl) var(--sp-2xl);
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--sp-xl);
    align-items: center;
}

.contact-doodles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .07
}

.contact-left h2 {
    font-family: 'Lora', serif;
    font-size: var(--text-3xl);
    color: var(--cream);
    line-height: 1.25;
    margin-bottom: var(--sp-sm);
    font-weight: 600;
}

.contact-left h2 em {
    color: var(--sand);
    font-style: italic
}

.contact-left p {
    font-size: var(--text-sm);
    color: rgba(253, 247, 239, .5);
    line-height: 1.85
}

.contact-links2 {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm)
}

.clink {
    display: flex;
    align-items: center;
    gap: var(--sp-md);
    padding: var(--sp-sm) var(--sp-md);
    background: rgba(253, 247, 239, .06);
    border: 1px solid rgba(253, 247, 239, .1);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--cream);
    font-size: var(--text-sm);
    transition: background .2s;
    /* prevent long emails from overflowing */
    min-width: 0;
}

.clink:hover {
    background: rgba(253, 247, 239, .11)
}

.clink-icon {
    width: clamp(28px, 3.5vw, 34px);
    height: clamp(28px, 3.5vw, 34px);
    background: rgba(253, 247, 239, .08);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    flex-shrink: 0;
}

.clink span {
    flex: 1;
    word-break: break-word;
    overflow-wrap: anywhere;
    min-width: 0;
    white-space: normal
}

.clink-arr {
    color: rgba(253, 247, 239, .25);
    font-size: var(--text-sm);
    flex-shrink: 0
}

/*FOOTER */
footer {
    text-align: center;
    padding: var(--sp-lg);
    color: var(--muted);
    font-family: 'Caveat', cursive;
    font-size: var(--text-lg);
    letter-spacing: .04em;
    position: relative;
    z-index: 2;
}

/* REVEAL ANIMATION */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s ease, transform .7s ease
}

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

/* RESPONSIVE  */
@media(max-width:600px) {

    /* nav */
    .logo span {
        display: none
    }

    /* hero */
    .hero-text-zone {
        padding-top: var(--sp-2xl)
    }

    /* about */
    .about-inner {
        grid-template-columns: 1fr;
        gap: var(--sp-xl)
    }

    .about-photo-wrap {
        width: min(260px, 80vw)
    }

    /* projects */
    .proj-card2 {
        grid-template-columns: 1fr auto;
        padding: var(--sp-md)
    }

    .proj-num2 {
        display: none
    }

    /* contact  */
    .contact-box {
        grid-template-columns: 1fr;
        padding: var(--sp-xl) var(--sp-lg);
        gap: var(--sp-lg);
    }
}

@media(min-width:601px) and (max-width:860px) {
    .about-inner {
        grid-template-columns: 1fr;
        gap: var(--sp-xl)
    }

    .about-photo-wrap {
        width: min(280px, 60vw)
    }

    .contact-box {
        grid-template-columns: 1fr;
        gap: var(--sp-lg);
        padding: var(--sp-xl)
    }
}