header{

padding:40px 0;

}

nav{

display:flex;

justify-content:space-between;

align-items:center;

}

nav ul{

display:flex;

gap:48px;

list-style:none;

}

nav a{

font-size:.9rem;

letter-spacing:.15em;

text-transform:uppercase;

transition:var(--transition);

}

nav a:hover{

color:var(--accent);

}

.logo{

font-family:var(--font-serif);

font-size:2rem;

cursor:pointer;

}

.hero{

min-height:80vh;

display:flex;

flex-direction:column;

justify-content:center;

}

.eyebrow{

color:var(--accent);

letter-spacing:.25em;

text-transform:uppercase;

margin-bottom:15px;

font-size:.8rem;

}

.hero h1{

font-family:var(--font-serif);

font-size:clamp(4.8rem,9vw,8.5rem);

font-weight:400;

line-height:.86;

max-width:700px;

letter-spacing:-0.03em;

margin: 0;

text-wrap: balance;

color: var(--text-primary);

font-feature-settings: "liga" 1, "kern" 1;

text-rendering: optimizeLegibility;

}

.intro{

margin-top:48px;

max-width:460px;

font-size:1.35rem;

color:var(--text-secondary);

line-height:1.8;

}

#projects{

padding-top:3rem;

padding-bottom:3rem;

}

.projects-header{

margin-bottom:4.5rem;

}
.projects-header h2{

font-family:var(--font-serif);

font-size:clamp(5rem,11vw,9rem);

font-weight:400;

line-height:.9;

margin-bottom:2rem;

}

.projects-header p{

max-width:500px;

font-size:1.2rem;

color:var(--text-secondary);

line-height:1.8;

}

.project-card a{

display:grid;

grid-template-columns:

260px

minmax(760px,1fr);

gap:4rem;

align-items:center;

}

.project-card:hover img{

transform:scale(1.03);

}

.project-number{

font-family:var(--font-serif);

font-size:5rem;

color:var(--accent);

}

.project-info p{

text-transform:uppercase;

letter-spacing:.15em;

font-size:.8rem;

color:var(--text-secondary);

}

.project-card{

    padding:3rem 0 5rem;

    border-top:1px solid rgba(255,255,255,.08);

}

.project-number{

    font-size:6.5rem;

    line-height:.75;

    font-family:var(--font-serif);

    color:var(--accent);

    font-weight:400;

    display:block;

    margin-bottom:1.4rem;

}

.project-info h3{

    margin-top:2.8rem;

    margin:.2rem 0 .8rem;

    font-family:var(--font-serif);

    font-size:3rem;

    font-weight:400;

}

.project-info{

    padding-top:5rem;

}

.project-tags{

    text-transform:uppercase;

    letter-spacing:.18em;

    line-height:2.4;

    font-size:.72rem;

    color:var(--text-secondary);

}

.project-image{

    width:100%;

    margin-top:18px;

    display:flex;

    align-items:flex-start;

    justify-content:flex-end;

}

.image-placeholder{

    width:100%;

    aspect-ratio:16 / 10;

   background:
linear-gradient(
145deg,
#2c2c2c 0%,
#242424 40%,
#1d1d1d 100%
);

    border:1px solid rgba(255,255,255,.06);

    display:flex;

    justify-content:center;

    align-items:center;

    color:rgba(255,255,255,.18);

    font-size:.8rem;

    letter-spacing:.4em;

    text-transform:uppercase;

}

.image-placeholder::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(

        circle at top left,

        rgba(255,255,255,.04),

        transparent 45%

    );

}

.project-image{
    width:100%;
    height:520px;

    overflow:hidden;

    background:#202020;

    border:1px solid rgba(255,255,255,.06);

    border-radius:6px;

    margin-top:28px;

    box-shadow:0 20px 50px rgba(0,0,0,.28);
}

.project-image img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform .8s ease,
        filter .8s ease;

    filter:brightness(.88);
}

.project-image:hover img{

    transform:scale(1.02);

    filter:brightness(1);
}

.project-image{

    position:relative;
}

.project-image::after{

    content:"";

    position:absolute;

    inset:0;

    border:1px solid rgba(255,255,255,.04);

    pointer-events:none;
}

footer{
    margin-top: 10rem;
    padding: 5rem 0;
    border-top: 1px solid rgba(255,255,255,.08);
    text-align:center;
}

footer h3{
    font-family: var(--font-title);
    font-size: 2.2rem;
    font-weight: 400;
    color:var(--text);
    margin-bottom:.8rem;
}

footer p{
    color:var(--text-secondary);
    font-size:.95rem;
    letter-spacing:.08em;
    line-height:1.8;
}

footer a{
    font-size: .95rem;
    opacity: .8;
    color:var(--text);
    text-decoration:none;
    transition:.3s;
}

footer a:hover{
    color:var(--accent);
}

.project-subtitle {
    font-size: 1rem;
    line-height: 1.5;
    color: #9a9a9a;
    margin: 12px 0 24px;
    max-width: 34ch;
}

.hero {
    position: relative;
    overflow: hidden;
}

.magnet-lines {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.7;
}

.magnet-lines canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.hero .eyebrow,
.hero h1,
.hero .intro {
    position: relative;
    z-index: 2;
}