:root{
  --paper:#f7f6f3;
  --ink:#1c1a17;
  --muted:#8a857c;
  --soft:#48443d;
  --hair:#e4e1da;
  --hair-soft:#eeece6;
  --shadow:0 18px 50px rgba(28,26,23,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{display:block;max-width:100%}

/* Header */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(247,246,243,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;transition:border-color .3s ease;
}
header.scrolled{border-bottom-color:var(--hair)}
.bar{
  max-width:1240px;margin:0 auto;padding:20px 28px;
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
}
.wordmark{
  font-family:'Fraunces',serif;font-weight:400;font-size:21px;
  letter-spacing:.01em;text-decoration:none;color:var(--ink);white-space:nowrap;
}
.wordmark .light{font-weight:300;color:var(--muted)}
nav{display:flex;gap:24px;align-items:baseline;flex-wrap:wrap}
nav a{
  font-size:13px;letter-spacing:.04em;text-transform:lowercase;
  color:var(--ink);text-decoration:none;position:relative;padding-bottom:2px;
}
nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--ink);transition:width .25s ease}
nav a:hover::after,nav a.current::after{width:100%}

/* Page shell */
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.hero{max-width:1240px;margin:0 auto;padding:72px 28px 40px}
.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
h1.display{
  font-family:'Archivo',sans-serif;font-weight:300;
  font-size:clamp(2.6rem,8vw,5.6rem);line-height:1.04;letter-spacing:-.02em;max-width:15ch;
}
h1.display em{font-style:normal;font-weight:500}
.lede{margin-top:26px;max-width:46ch;font-size:clamp(1rem,2.4vw,1.18rem);color:var(--soft)}
.backlink{display:inline-block;margin:0 0 8px;font-size:13px;letter-spacing:.04em;color:var(--muted);text-decoration:none}
.backlink:hover{color:var(--ink)}

/* Filter row */
.filters{
  max-width:1240px;margin:0 auto;padding:18px 28px 32px;
  display:flex;flex-wrap:wrap;gap:8px 10px;border-bottom:1px solid var(--hair-soft);
}
.filter{
  font-family:'Inter',sans-serif;font-size:13px;letter-spacing:.02em;color:var(--muted);
  background:none;border:1px solid var(--hair);border-radius:100px;padding:7px 15px;cursor:pointer;transition:all .2s ease;
}
.filter:hover{color:var(--ink);border-color:var(--muted)}
.filter.active{color:var(--paper);background:var(--ink);border-color:var(--ink)}

/* Masonry gallery */
.gallery{max-width:1240px;margin:0 auto;padding:34px 28px 90px;column-count:1;column-gap:18px}
@media(min-width:620px){.gallery{column-count:2}}
@media(min-width:1000px){.gallery{column-count:3}}
.shot{break-inside:avoid;margin-bottom:18px;position:relative;cursor:pointer;background:var(--hair-soft);overflow:hidden}
.shot img{width:100%;height:auto;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.shot:hover img{transform:scale(1.03)}
.shot .meta{
  position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;
  background:linear-gradient(to top,rgba(20,18,15,.62),rgba(20,18,15,0));color:#fff;
  opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease;
}
.shot:hover .meta{opacity:1;transform:none}
.shot .meta .cat{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.82}
.shot .meta .cap{font-family:'Fraunces',serif;font-size:15px;margin-top:3px}
.shot.hide{display:none}

/* Project cards (cover grid) */
.cards{max-width:1240px;margin:0 auto;padding:34px 28px 60px;display:grid;gap:26px;grid-template-columns:1fr}
@media(min-width:620px){.cards{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.cards{grid-template-columns:1fr 1fr 1fr}}
.card{text-decoration:none;color:inherit;display:block}
.card .cover{aspect-ratio:4/3;background:var(--hair-soft);overflow:hidden}
.card .cover img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.card:hover .cover img{transform:scale(1.04)}
.card h3{font-family:'Fraunces',serif;font-weight:400;font-size:19px;margin-top:12px}
.card p{color:var(--muted);font-size:14px;margin-top:2px}

/* Prose (about, blog) */
.prose{max-width:680px;margin:0 auto;padding:24px 28px 90px;font-size:17px;color:var(--soft)}
.prose p{margin-bottom:1.2em}
.prose img{margin:1.6em 0;width:100%}
.about-grid{max-width:1000px;margin:0 auto;padding:24px 28px 90px;display:grid;gap:40px;grid-template-columns:1fr}
@media(min-width:760px){.about-grid{grid-template-columns:320px 1fr;align-items:start}}
.about-grid .portrait{width:100%;background:var(--hair-soft)}
.about-grid .portrait img{width:100%}

/* Blog list */
.posts{max-width:760px;margin:0 auto;padding:24px 28px 90px}
.post-row{display:block;text-decoration:none;color:inherit;padding:26px 0;border-bottom:1px solid var(--hair-soft)}
.post-row .date{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.post-row h2{font-family:'Fraunces',serif;font-weight:400;font-size:24px;margin-top:6px}
.post-row:hover h2{text-decoration:underline;text-underline-offset:4px}

/* Contact form */
.form{max-width:560px;margin:0 auto;padding:24px 28px 90px}
.field{margin-bottom:20px}
.field label{display:block;font-size:13px;letter-spacing:.04em;color:var(--muted);margin-bottom:7px}
.field input,.field textarea{
  width:100%;background:#fff;border:1px solid var(--hair);border-radius:4px;
  padding:12px 14px;font-family:inherit;font-size:15px;color:var(--ink);
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ink)}
.field textarea{min-height:140px;resize:vertical}
.btn{
  font-family:'Inter',sans-serif;font-size:14px;letter-spacing:.02em;
  background:var(--ink);color:var(--paper);border:none;border-radius:100px;
  padding:12px 26px;cursor:pointer;transition:opacity .2s;
}
.btn:hover{opacity:.85}
.notice{margin-top:16px;font-size:14px;color:var(--soft)}

/* Empty states */
.empty{max-width:1240px;margin:0 auto;padding:60px 28px 120px;color:var(--muted);font-size:15px}

/* Footer */
footer{border-top:1px solid var(--hair);padding:48px 28px 60px}
.foot{max-width:1240px;margin:0 auto;display:flex;flex-wrap:wrap;gap:24px 40px;justify-content:space-between;align-items:flex-start}
.foot .name{font-family:'Fraunces',serif;font-size:18px}
.foot .col{display:flex;flex-direction:column;gap:7px;font-size:14px;color:var(--muted)}
.foot .col span.h{text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--ink)}
.foot a{color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--ink)}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(22,20,17,.94);display:none;align-items:center;justify-content:center;padding:34px}
.lightbox.open{display:flex}
.lb-img-wrap{max-width:1100px;max-height:88vh;display:flex;flex-direction:column;align-items:center;gap:14px}
.lightbox img{max-width:100%;max-height:78vh;object-fit:contain;box-shadow:var(--shadow)}
.lb-caption{color:#f4f1ea;text-align:center;font-size:14px}
.lb-caption .cat{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.7;margin-bottom:4px}
.lb-caption .cap{font-family:'Fraunces',serif;font-size:18px}
.lb-btn{position:absolute;top:50%;transform:translateY(-50%);background:none;border:none;color:#fff;cursor:pointer;font-size:34px;padding:14px 18px;opacity:.7;transition:opacity .2s;font-family:'Fraunces',serif}
.lb-btn:hover{opacity:1}
.lb-prev{left:8px}.lb-next{right:8px}
.lb-close{position:absolute;top:18px;right:22px;background:none;border:none;color:#fff;font-size:26px;cursor:pointer;opacity:.7;transition:opacity .2s;line-height:1}
.lb-close:hover{opacity:1}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}