@font-face { font-family: Inter; font-style: normal; font-weight: 400 700; font-display: swap; src: url("./_next/static/media/1bffadaabf893a1e-s.7cd81963.woff2") format("woff2"); }
@font-face { font-family: Archivo; font-style: normal; font-weight: 400 900; font-display: swap; src: url("./_next/static/media/75affa71d1e2f6a7-s.p.51cde8ff.woff2") format("woff2"); }

:root { --ink: #161513; --paper: #f4f1ea; --accent: #9a6b3f; --line: rgba(22, 21, 19, .16); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); font-family: Inter, Arial, Helvetica, sans-serif; margin: 0; }
a { color: inherit; }
.skip-link { background: var(--ink); color: var(--paper); left: 1rem; padding: .75rem 1rem; position: absolute; top: -5rem; z-index: 10; }
.skip-link:focus { top: 1rem; }
.wrap { margin: 0 auto; max-width: 1200px; padding: 0 1.5rem; }
.site-header { border-bottom: 1px solid var(--line); padding: 1.5rem 0; }
.header-row { align-items: center; display: flex; gap: 2rem; justify-content: space-between; }
.logo { display: block; height: auto; max-width: 150px; }
.nav { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }
.nav a, .eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.nav a { text-decoration-thickness: 1px; text-underline-offset: .3em; }
.hero { border-bottom: 1px solid var(--line); padding: 4rem 0 3rem; }
.eyebrow { color: var(--accent); }
h1, h2, h3 { font-family: Archivo, Inter, Arial, sans-serif; font-weight: 700; text-transform: uppercase; }
h1 { font-size: clamp(2.35rem, 5vw, 3.75rem); letter-spacing: -.04em; line-height: 1.02; margin: 1rem 0 1.25rem; max-width: 900px; }
h2 { font-size: clamp(1.65rem, 3vw, 2.45rem); letter-spacing: -.035em; line-height: 1.08; margin: 0 0 1rem; }
h3 { font-size: 1.3rem; margin: .5rem 0; }
p, li { font-size: 1rem; line-height: 1.65; }
.lead { font-size: 1.1rem; max-width: 720px; }
.actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
.button { background: var(--ink); color: var(--paper); display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .12em; padding: 1rem 1.2rem; text-decoration: none; text-transform: uppercase; }
.button.secondary { background: transparent; border: 1px solid var(--ink); color: var(--ink); }
.section { border-bottom: 1px solid var(--line); padding: 3.5rem 0; }
.two-col { display: grid; gap: 2rem 5rem; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2rem; }
.card { border: 1px solid var(--line); display: flex; flex-direction: column; min-height: 100%; text-decoration: none; }
.card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.card-content { padding: 1.25rem; }
.card small { color: #665f57; display: block; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.project-hero { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery-item { background: transparent; border: 0; cursor: zoom-in; display: block; margin: 0; padding: 0; }
.gallery-item:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.project-hero img { aspect-ratio: 4 / 3; object-fit: cover; transition: transform .25s ease; width: 100%; }
.gallery-item:hover img { transform: scale(1.02); }
.gallery-item:first-child { grid-column: span 2; grid-row: span 2; }
.lightbox { background: #161513; border: 0; color: #f4f1ea; max-height: 94vh; max-width: min(1100px, 94vw); padding: 1rem; position: relative; }
.lightbox::backdrop { background: rgba(0, 0, 0, .82); }
.lightbox img { display: block; max-height: calc(94vh - 5rem); max-width: 100%; object-fit: contain; }
.lightbox p { font-size: .8rem; line-height: 1.4; margin: .75rem .25rem .1rem; opacity: .75; }
.lightbox-close { background: #f4f1ea; border: 0; color: #161513; cursor: pointer; font: inherit; font-size: .75rem; margin: 0 0 .75rem auto; padding: .55rem .7rem; text-transform: uppercase; }
.site-footer { background: var(--ink); color: var(--paper); padding: 3rem 0; }
.site-footer a { text-underline-offset: .3em; }
.legal { color: rgba(244,241,234,.7); font-size: .88rem; }
@media (max-width: 720px) { .header-row, .two-col, .project-hero { align-items: flex-start; flex-direction: column; grid-template-columns: 1fr; } .gallery-item:first-child { grid-column: auto; grid-row: auto; } .cards { grid-template-columns: 1fr; } .hero { padding: 3rem 0 2.5rem; } }