:root {
    --white: #ffffff;
    --brown: #5a3e2b;
    --darkgray: #2f2f2f;
    --tomato: #ff4d4d;
}

body {
    margin:0;
    font-family: Arial, sans-serif;
    color: var(--darkgray);
    background: var(--white);
}

/* HEADER */
header {
    position: relative;
    padding: 30px 0;
    transition: all 0.3s ease;
}

header.scrolled {
    padding:10px 0;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(6px);
}

/* NAV */
.nav {
    display:flex;
    justify-content:flex-end;
    align-items:center;
}

/* LOGO */
.logo {
    position:absolute;
    top:20px;
    left:5%;
}

.logo img {
    height:65px;
    transition: all 0.4s ease;
}

header.scrolled .logo img {
    height:60px;
}

/* NAV LINKS */
nav a {
    margin-left:30px;
    text-decoration:none;
    color: var(--darkgray);
}

nav a:hover {
    color: var(--tomato);
}

/* HERO */
.hero {
    padding:160px 20px 120px;
}

.container {
    width:90%;
    max-width:1100px;
    margin:auto;
}

/* BUTTON */
.btn {
    display:inline-block;
    margin-top:20px;
    padding:10px 20px;
    background: var(--brown);
    color:white;
    text-decoration:none;
}

.btn:hover {
    background: var(--tomato);
}


a {
    text-decoration:none;
    color: inherit;   /* inherits your text color */
}

/* GRID */
.grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
}

/* CARD */
.card img {
    width:100%;
    height:250px;
    object-fit:cover;
    transition: transform 0.6s ease;
}

.card:hover img {
    transform:scale(1.08);
}

.card {
    color: var(--darkgray);
}

.card:visited {
    color: var(--darkgray);
}

.card h3 {
    transition: color 0.3s ease;
}

.card:hover h3 {
    color: var(--brown);
}

/* FADE */
.fade-in {
    opacity:0;
    transform:translateY(30px);
    transition:1s;
}

.fade-in.visible {
    opacity:1;
    transform:translateY(0);
}

/* PROJECT HERO */
.project-hero {
    height:100vh;
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:flex-end;
}

.project-hero h1 {
    color:white;
    margin:40px;
    font-size:48px;
}