:root { --ink: #171717; --muted: #77746e; --line: #d9d7d0; --paper: #f3f2ed; --acid: #d4f04b; --serif: Georgia, 'Times New Roman', serif; }
* { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'DM Sans', sans-serif; } a { color: inherit; text-decoration: none; } button { color: inherit; font: inherit; }
.page-shell { max-width: 1440px; margin: auto; padding: 0 5.5vw; overflow: hidden; }.site-header { height: 94px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; }.brand { display: flex; gap: 11px; align-items: center; letter-spacing: -.02em; }.brand-mark { display: flex; align-items: end; gap: 2px; height: 17px; }.brand-mark i { display: block; width: 4px; background: var(--ink); transform: skew(-22deg); }.brand-mark i:nth-child(1) { height: 9px; }.brand-mark i:nth-child(2) { height: 14px; }.brand-mark i:nth-child(3) { height: 17px; }.main-nav { display: flex; gap: 34px; color: var(--muted); }.main-nav a { padding: 8px 0; }.main-nav a.active { color: var(--ink); border-bottom: 1px solid var(--ink); }.contact-link { border-bottom: 1px solid var(--ink); padding: 8px 0; }.contact-link span { margin-left: 8px; font-size: 16px; }
.intro { min-height: calc(100svh - 94px); display: grid; grid-template-columns: 1.35fr .65fr; align-items: end; padding: 105px 0 92px; border-bottom: 1px solid var(--line); }.eyebrow, .section-kicker { margin: 0 0 22px; color: var(--muted); text-transform: uppercase; font-size: 10px; font-weight: 700; letter-spacing: .14em; }.eyebrow span { display: inline-block; width: 7px; height: 7px; margin-right: 10px; background: var(--acid); border-radius: 50%; }.intro h1 { margin: 0; font-family: 'Space Grotesk', sans-serif; font-size: clamp(62px, 9.6vw, 145px); line-height: .84; font-weight: 500; letter-spacing: -.085em; }.intro h1 em { font-family: var(--serif); font-weight: 400; letter-spacing: -.1em; }.intro-note { align-self: end; max-width: 240px; margin-bottom: 6px; }.intro-note p { margin-bottom: 58px; color: #4e4c48; font-size: 15px; line-height: 1.5; }.scroll-note { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }.scroll-note b { color: var(--ink); font-size: 19px; font-weight: 400; }
.work-section { padding: 88px 0 120px; }.work-toolbar { display: flex; justify-content: space-between; align-items: end; margin-bottom: 45px; }.work-toolbar h2 { margin: 0; font-family: 'Space Grotesk', sans-serif; font-size: 43px; font-weight: 500; letter-spacing: -.06em; }.work-toolbar h2 span { color: var(--muted); font-family: 'DM Sans', sans-serif; font-size: 14px; letter-spacing: 0; vertical-align: top; }
.gallery { columns: 3 260px; column-gap: 25px; }.project-card { break-inside: avoid; cursor: pointer; margin: 0 0 63px; outline: none; animation: rise .6s both; }.project-card:nth-child(2) { animation-delay: .08s; }.project-card:nth-child(3) { animation-delay: .16s; }.project-card-offset { margin-top: 92px; }.image-frame { position: relative; overflow: hidden; background: #ddd; }.image-frame img { width: 100%; display: block; transition: transform .65s cubic-bezier(.2,.7,.2,1); }.project-card:hover .image-frame img, .project-card:focus .image-frame img { transform: scale(1.035); }.view-project { position: absolute; right: 13px; bottom: 13px; padding: 8px 11px; color: var(--ink); background: var(--acid); opacity: 0; transform: translateY(7px); transition: .25s ease; font-size: 11px; font-weight: 700; }.view-project b { margin-left: 9px; font-size: 15px; font-weight: 400; }.project-card:hover .view-project, .project-card:focus .view-project { opacity: 1; transform: translateY(0); }.project-meta { display: flex; justify-content: space-between; gap: 14px; padding-top: 14px; }.project-meta h3 { margin-bottom: 5px; font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 600; letter-spacing: -.04em; }.project-meta p, .project-meta > span { margin: 0; color: var(--muted); font-size: 11px; }.project-meta > span { padding-top: 2px; }.empty-state { padding: 80px 0; color: var(--muted); }
.site-footer { display: flex; justify-content: space-between; padding: 23px 0 30px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }.site-footer p { margin: 0; }.site-footer a { color: var(--ink); border-bottom: 1px solid var(--ink); }.project-dialog { width: min(920px, calc(100% - 32px)); padding: 0; border: 0; background: var(--paper); color: var(--ink); box-shadow: 0 25px 80px #17171733; }.project-dialog::backdrop { background: #17171799; backdrop-filter: blur(4px); }.dialog-image-wrap img { display: block; width: 100%; max-height: 62vh; object-fit: contain; background: #e7e5de; }.dialog-details { display: grid; grid-template-columns: 1fr 1fr 100px; gap: 25px; padding: 28px 30px 31px; align-items: end; }.dialog-details h2 { margin: 0; font-family: 'Space Grotesk', sans-serif; font-size: 28px; letter-spacing: -.05em; }.dialog-details p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }.dialog-details > span { color: var(--muted); font-size: 12px; text-align: right; }.dialog-close { position: absolute; z-index: 2; top: 14px; right: 16px; width: 35px; height: 35px; border: 0; border-radius: 50%; background: var(--acid); cursor: pointer; font-size: 25px; line-height: 1; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 700px) { .page-shell { padding: 0 20px; }.site-header { height: 76px; }.main-nav { gap: 17px; }.contact-link { display: none; }.intro { display: block; min-height: calc(100svh - 76px); padding: 85px 0 65px; }.intro h1 { font-size: clamp(64px, 20vw, 105px); }.intro-note { position: absolute; right: 0; bottom: 65px; max-width: 190px; margin: 0; }.intro-note p { margin-bottom: 35px; }.work-section { padding: 65px 0 80px; }.work-toolbar { display: block; margin-bottom: 35px; }.work-toolbar h2 { font-size: 36px; margin-bottom: 25px; }.gallery { columns: 2 150px; column-gap: 13px; }.project-card, .project-card-offset { margin-bottom: 39px; margin-top: 0; }.project-meta { display: block; }.project-meta > span { display: block; margin-top: 5px; }.project-meta h3 { font-size: 14px; }.site-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.site-footer a { grid-column: 1 / -1; width: max-content; }.dialog-details { display: block; padding: 22px; }.dialog-details h2 { margin-bottom: 14px; }.dialog-details > span { display: block; margin-top: 16px; text-align: left; } }