@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&family=Playfair+Display:ital,wght@0,400;1,400&display=swap');

:root{--bg:#f4f1eb;--ink:#181715;--muted:#77736c;--line:#d9d4ca}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"DM Sans",Arial,sans-serif}
.site-header{height:78px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(244,241,235,.94);backdrop-filter:blur(10px);z-index:10}
.wordmark{font-size:18px;letter-spacing:.22em;color:var(--ink);text-decoration:none;font-weight:500}
nav{display:flex;gap:30px}nav a{font-size:13px;color:var(--ink);text-decoration:none}
.hero{min-height:calc(100vh - 78px);padding:7vw 5vw;display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:center}
.hero-copy{max-width:650px}.eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 25px}
h1{font-family:"Playfair Display",Georgia,serif;font-weight:400;font-size:clamp(48px,7vw,105px);line-height:.98;margin:0 0 32px;letter-spacing:-.04em}
h1 em{font-weight:400}
.intro{font-size:16px;line-height:1.7;max-width:510px;color:#514e48;margin-bottom:35px}
.text-link{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:5px;font-size:13px}
.hero-image{height:min(72vh,760px);display:flex;align-items:center;justify-content:center;overflow:hidden;background:#ddd7ce}
.hero-image img{width:100%;height:100%;object-fit:cover}
.work-section{padding:8vw 5vw}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:35px;gap:20px}
.filters{display:flex;gap:20px;flex-wrap:wrap}.filter{border:0;background:none;padding:0 0 5px;border-bottom:1px solid transparent;color:var(--muted);cursor:pointer;font:inherit;font-size:12px}.filter.active{color:var(--ink);border-bottom-color:var(--ink)}
.gallery{columns:3 280px;column-gap:22px}
.card{break-inside:avoid;margin:0 0 45px}.art-button{border:0;padding:0;background:none;cursor:zoom-in;width:100%;display:block}.art-button img{width:100%;height:auto;display:block;transition:opacity .3s}.art-button:hover img{opacity:.88}
.meta{display:flex;justify-content:space-between;gap:10px;margin-top:12px;font-size:13px}.category{font-size:11px;color:var(--muted);margin-top:5px}
.about-section{padding:10vw 10vw;display:grid;grid-template-columns:1fr 1fr;gap:10vw;border-top:1px solid var(--line)}
h2{font-family:"Playfair Display",Georgia,serif;font-weight:400;font-size:clamp(34px,4vw,62px);line-height:1.05;letter-spacing:-.03em;margin:0}
.about-copy{font-size:16px;line-height:1.8;color:#514e48;max-width:600px}.about-copy p{margin-top:0;margin-bottom:25px}.small-note{font-size:12px;color:var(--muted)}
.contact-section{padding:9vw 10vw 12vw;background:#e9e4da}.contact-section h2{max-width:800px;margin-bottom:35px}.contact-link{font-family:"Playfair Display",Georgia,serif;font-size:30px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink)}
footer{padding:25px 5vw;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.lightbox{position:fixed;inset:0;background:rgba(15,14,13,.96);z-index:30;display:none;align-items:center;justify-content:center;padding:5vh 8vw}.lightbox.open{display:flex}.lightbox figure{margin:0;max-width:82vw;max-height:90vh;text-align:center}.lightbox img{max-width:82vw;max-height:82vh;object-fit:contain}.lightbox figcaption{color:#ddd;margin-top:15px;font-size:12px}.lightbox button{position:absolute;background:none;border:0;color:#fff;font-size:32px;cursor:pointer}.close{right:28px;top:20px}.prev{left:28px;top:50%;transform:translateY(-50%)}.next{right:28px;top:50%;transform:translateY(-50%)}
@media(max-width:800px){.site-header{height:64px}.hero{min-height:auto;padding:14vw 6vw;display:flex;flex-direction:column;gap:45px;align-items:stretch}.hero-image{height:70vh}.work-section{padding:18vw 6vw}.section-head{display:block}.filters{margin-top:25px}.gallery{columns:2 150px;column-gap:14px}.card{margin-bottom:30px}.about-section{padding:18vw 6vw;display:block}.about-copy{margin-top:35px}.contact-section{padding:18vw 6vw}nav{gap:16px}nav a{font-size:12px}.lightbox{padding:5vh 5vw}.lightbox img{max-width:90vw;max-height:80vh}}
@media(max-width:500px){.gallery{columns:1}.hero-image{height:65vh}h1{font-size:50px}}
