:root { --gutter: clamp(24px, 4.2vw, 68px); --header: 90px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #191919; color: #171717; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
.projects-header { position: fixed; z-index: 50; inset: 0 0 auto; height: var(--header); padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; background: rgba(250,250,250,.96); border-bottom: 1px solid rgba(0,0,0,.06); backdrop-filter: blur(10px); }
.projects-brand { font-size: 16px; font-weight: 600; letter-spacing: .16em; white-space: nowrap; }
.projects-nav { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: clamp(25px,3vw,48px); }
.projects-nav a, .projects-nav button { position: relative; padding: 7px 0; border: 0; background: none; color: #555; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.projects-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 1px; height: 1px; background: #171717; transition: right .3s; }
.projects-nav a:hover::after, .projects-nav a.active::after { right: 0; }
.projects-toggle { position: relative; z-index: 60; width: 44px; height: 44px; padding: 0; border: 1px solid #ddd; border-radius: 50%; background: transparent; cursor: pointer; }
.projects-toggle span { position: absolute; left: 9px; width: 24px; height: 1.5px; background: #171717; transition: .4s; }
.projects-toggle span:nth-child(1) { top: 14px; }.projects-toggle span:nth-child(2) { top: 21px; }.projects-toggle span:nth-child(3) { top: 28px; }
.menu-open .projects-toggle span:nth-child(1) { top: 21px; transform: rotate(45deg); }.menu-open .projects-toggle span:nth-child(2) { opacity: 0; }.menu-open .projects-toggle span:nth-child(3) { top: 21px; transform: rotate(-45deg); }
.projects-menu { position: fixed; z-index: 40; inset: 0; display: grid; place-items: center; background: #f5f4f1; opacity: 0; visibility: hidden; transition: .45s; }
.menu-open .projects-menu { opacity: 1; visibility: visible; }
.projects-menu nav { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.projects-menu a { font-size: clamp(40px,7vw,90px); font-weight: 300; line-height: 1; letter-spacing: -.04em; }
.projects-list { padding-top: var(--header); display: flex; flex-direction: column; gap: 8px; background: #191919; }
.project-card { height: 75vh; min-height: 500px; background: #111; overflow: hidden; }
.project-card > a { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
.project-card img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.001); transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.project-card:hover img { transform: scale(1.035); }
.project-overlay { position: absolute; inset: 0; background: linear-gradient(to top,rgba(0,0,0,.58),transparent 43%); transition: opacity .6s; }
.project-card:hover .project-overlay { opacity: .76; }
.project-card div { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 32px; display: flex; align-items: end; justify-content: space-between; color: #fff; }
.project-card h2 { margin: 0; font-size: clamp(15px,1.5vw,19px); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.project-card p { margin: 0; color: rgba(255,255,255,.75); font-size: 12px; font-weight: 300; letter-spacing: .15em; }
footer { min-height: 280px; padding: 70px var(--gutter); display: flex; align-items: end; justify-content: space-between; background: #111; color: #fff; }
footer a { font-size: 16px; font-weight: 600; letter-spacing: .16em; } footer p { margin: 0; color: #aaa; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 900px) { .projects-nav { display: none; } }
@media (max-width: 600px) { :root { --header: 78px; --gutter: 24px; }.projects-brand { font-size: 14px; }.project-card { height: 72svh; min-height: 430px; }.project-card div { bottom: 24px; }.project-card p { max-width: 45%; text-align: right; }.projects-menu a { font-size: 13vw; } footer { min-height: 230px; flex-direction: column; align-items: flex-start; justify-content: end; gap: 18px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { transition-duration: .01ms !important; } }