/* Brunner & Sand — gallery site. Light "white cube": Swiss grotesque chrome,
   serif reading text, hairline rules, near-monochrome, generous air. */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@400;500;600&display=swap');

:root{
  --paper:#fbfbf9; --ink:#17171a; --soft:#3a3a3e; --muted:#7d7d82; --faint:#a9a8a4;
  --line:#e6e4de; --line2:#d8d6cf; --tile:#eceae5; --black:#101012;
  --sans:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  --serif:'EB Garamond',Georgia,'Times New Roman',serif;
  --maxw:1400px; --gut:clamp(18px,4.4vw,64px);
  --cap:0.685rem; /* small caps label */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:none}
h1,h2,h3,h4{font-weight:400;margin:0}
hr{border:0;border-top:1px solid var(--line);margin:0}

.cap{font-family:var(--sans);font-size:var(--cap);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:500}
.serif{font-family:var(--serif)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.muted{color:var(--muted)}
.center{text-align:center}

/* ---------- header / nav ---------- */
header.site{position:sticky;top:0;z-index:50;background:rgba(251,251,249,.9);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  max-width:var(--maxw);margin:0 auto;padding:18px var(--gut)}
.brand{font-family:var(--sans);font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  font-size:.92rem;white-space:nowrap}
.brand .amp{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0;text-transform:none}
nav.main{display:flex;flex-wrap:wrap;gap:20px;justify-content:flex-end}
nav.main a{font-size:var(--cap);letter-spacing:.15em;text-transform:uppercase;color:var(--soft);
  padding-bottom:2px;border-bottom:1px solid transparent;font-weight:500}
nav.main a:hover{color:var(--ink);border-bottom-color:var(--ink)}
nav.main a.on{color:var(--ink);border-bottom-color:var(--ink)}
.menu-btn{display:none;background:none;border:0;font-size:var(--cap);letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink);cursor:pointer;font-family:var(--sans);font-weight:500}

/* ---------- hero ---------- */
.hero{position:relative}
.hero .img{aspect-ratio:16/9;background:var(--tile);overflow:hidden}
.hero .img img{width:100%;height:100%;object-fit:cover}
.hero-cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 28px;
  padding:16px 0;border-bottom:1px solid var(--line)}
.hero-cap .t{font-family:var(--serif);font-size:clamp(1.15rem,2.3vw,1.7rem);font-style:italic}
.hero-cap .t b{font-style:normal;font-weight:500}

/* ---------- generic section ---------- */
section{padding:clamp(46px,7vw,96px) 0}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  margin-bottom:30px;padding-bottom:14px;border-bottom:1px solid var(--ink)}
.sec-head h2{font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,2rem)}
.sec-head a.more{font-size:var(--cap);letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.sec-head a.more:hover{color:var(--ink)}
.lead{font-family:var(--serif);font-size:clamp(1.3rem,3vw,2.15rem);line-height:1.34;max-width:30ch}
.prose{font-family:var(--serif);font-size:1.16rem;line-height:1.62;color:var(--soft);max-width:62ch}
.prose p{margin:0 0 1.05em}

/* ---------- grids ---------- */
.grid{display:grid;gap:clamp(20px,2.6vw,40px) clamp(16px,2vw,32px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

/* work / artist card */
.card{display:block}
.card .ph{background:var(--tile);overflow:hidden;display:flex;align-items:flex-end;justify-content:center}
.card .ph.tall{aspect-ratio:4/5}
.card .ph.work{min-height:200px;padding:0}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.card.obj .ph img,.card .ph img.contain{object-fit:contain}
.card:hover .ph img{transform:scale(1.022)}
.card .meta{padding:11px 2px 0}
.card .nm{font-family:var(--serif);font-size:1.04rem}
.card .ti{font-family:var(--serif);font-style:italic;font-size:.98rem;color:var(--soft)}
.card .sub{font-size:.8rem;color:var(--muted);margin-top:3px;letter-spacing:.01em}
.card .avail{font-size:var(--cap);letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin-top:5px}
.card .avail.on{color:#3f6f4a}

/* works wall – masonry-ish via columns for varied heights */
.wall{column-gap:clamp(16px,2vw,34px);columns:4}
.wall .card{break-inside:avoid;margin-bottom:clamp(22px,2.6vw,40px)}
.wall .ph{min-height:unset}
.wall .ph img{height:auto}

/* ---------- filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin-bottom:30px}
.filters .lbl{font-size:var(--cap);letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-right:6px}
.chip{font-family:var(--sans);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--line2);background:transparent;color:var(--soft);padding:6px 12px;border-radius:100px;
  cursor:pointer;transition:.15s}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
select.flt{font-family:var(--sans);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--line2);background:transparent;color:var(--soft);padding:6px 28px 6px 12px;border-radius:100px;
  cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237d7d82'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center}
.count{margin-left:auto;font-size:var(--cap);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- artist page ---------- */
.artist-head{display:grid;grid-template-columns:1fr;gap:6px;padding:clamp(30px,6vw,70px) 0 26px;border-bottom:1px solid var(--ink)}
.artist-head h1{font-family:var(--serif);font-size:clamp(2rem,6vw,4.2rem);line-height:1.02}
.artist-head .born{font-size:var(--cap);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.two{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(30px,6vw,80px);align-items:start}
.statement{font-family:var(--serif);font-style:italic;font-size:1.35rem;line-height:1.5;color:var(--ink);
  border-left:2px solid var(--ink);padding-left:20px;margin:6px 0 0}
.cv h4{font-size:var(--cap);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  margin:26px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.cv ul{list-style:none;margin:0;padding:0}
.cv li{font-size:.86rem;color:var(--soft);padding:5px 0;border-bottom:1px solid var(--line);line-height:1.45}
.cv li .yr{color:var(--muted);display:inline-block;min-width:3.2em}

/* ---------- exhibitions / lists ---------- */
.exrow{display:grid;grid-template-columns:1.1fr 1.5fr;gap:clamp(20px,4vw,56px);align-items:start;
  padding:clamp(26px,4vw,46px) 0;border-bottom:1px solid var(--line)}
.exrow .ph{aspect-ratio:4/3;background:var(--tile);overflow:hidden}
.exrow .ph img{width:100%;height:100%;object-fit:cover}
.exrow h3{font-family:var(--serif);font-size:clamp(1.4rem,3vw,2.1rem);font-style:italic;margin-bottom:6px}
.exrow h3 b{font-style:normal;font-weight:500}
.exrow .who{font-size:.98rem;color:var(--soft);font-family:var(--serif)}
.exrow .when{font-size:var(--cap);letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.exrow .badge{display:inline-block;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--line2);border-radius:100px;padding:3px 10px;color:var(--soft);margin-bottom:12px}
.exrow .badge.now{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.listrow{display:grid;grid-template-columns:7em 1fr auto;gap:18px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--line)}
.listrow .d{font-size:var(--cap);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.listrow .ti2{font-family:var(--serif);font-size:1.12rem}
.listrow .bd{font-size:.92rem;color:var(--soft);grid-column:2/4;max-width:74ch}
.listrow .tag{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}

/* ---------- forms ---------- */
form.inq{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;max-width:680px}
form.inq .full{grid-column:1/3}
form.inq label{display:block;font-size:var(--cap);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
form.inq input,form.inq textarea,form.inq select{width:100%;font-family:var(--serif);font-size:1.05rem;
  background:transparent;border:0;border-bottom:1px solid var(--line2);padding:8px 0;color:var(--ink)}
form.inq input:focus,form.inq textarea:focus,form.inq select:focus{outline:0;border-bottom-color:var(--ink)}
form.inq textarea{resize:vertical;min-height:90px}
.btn{font-family:var(--sans);font-size:var(--cap);letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);padding:13px 28px;cursor:pointer;border-radius:0;
  transition:.15s;display:inline-block}
.btn:hover{background:transparent;color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.hp{position:absolute;left:-9999px}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:200;background:rgba(245,244,241,.97);display:none;
  grid-template-rows:1fr auto;padding:clamp(20px,4vw,60px)}
.lb.open{display:grid}
.lb .stage{display:flex;align-items:center;justify-content:center;overflow:hidden}
.lb .stage img{max-width:100%;max-height:74vh;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.14)}
.lb .info{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 30px;align-items:flex-end;
  padding-top:22px;border-top:1px solid var(--line2);margin-top:18px}
.lb .info .nm{font-family:var(--serif);font-size:1.2rem}
.lb .info .ti{font-family:var(--serif);font-style:italic;color:var(--soft)}
.lb .info .det{font-size:.82rem;color:var(--muted);margin-top:4px}
.lb .x{position:absolute;top:18px;right:22px;font-size:var(--cap);letter-spacing:.15em;text-transform:uppercase;
  background:none;border:0;cursor:pointer;color:var(--ink)}
.lb .nav-a{position:absolute;top:50%;transform:translateY(-50%);background:none;border:0;cursor:pointer;
  font-size:2rem;color:var(--soft);padding:10px 16px}
.lb .prev{left:6px} .lb .next{right:6px}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--ink);margin-top:40px;padding:clamp(40px,6vw,72px) 0 50px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:34px}
footer.site h5{font-size:var(--cap);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin:0 0 12px}
footer.site p,footer.site address{font-style:normal;font-size:.9rem;line-height:1.62;color:var(--soft);margin:0 0 4px}
footer.site a:hover{color:var(--ink);text-decoration:underline}
.foot-brand{font-family:var(--sans);font-weight:600;letter-spacing:.22em;text-transform:uppercase;font-size:.95rem;margin-bottom:16px}
.foot-news{display:flex;gap:0;border-bottom:1px solid var(--line2);max-width:300px}
.foot-news input{flex:1;background:transparent;border:0;font-family:var(--serif);font-size:1rem;padding:8px 0;color:var(--ink)}
.foot-news input:focus{outline:0}
.foot-news button{background:none;border:0;cursor:pointer;font-size:var(--cap);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.legal{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:40px;padding-top:18px;border-top:1px solid var(--line);
  font-size:.74rem;color:var(--muted);letter-spacing:.02em}

/* ---------- responsive ---------- */
@media(max-width:1080px){ .g4{grid-template-columns:repeat(3,1fr)} .wall{columns:3} .foot-grid{grid-template-columns:1fr 1fr} }
@media(max-width:880px){
  nav.main{display:none;position:fixed;inset:56px 0 auto 0;background:var(--paper);flex-direction:column;
    align-items:flex-start;gap:0;padding:8px var(--gut) 24px;border-bottom:1px solid var(--line)}
  nav.main.open{display:flex}
  nav.main a{padding:13px 0;font-size:.8rem;width:100%;border-bottom:1px solid var(--line)}
  .menu-btn{display:block}
  .two{grid-template-columns:1fr;gap:36px}
  .exrow{grid-template-columns:1fr;gap:16px}
  .g3,.g4{grid-template-columns:repeat(2,1fr)} .wall{columns:2}
  .lead{font-size:1.5rem}
}
@media(max-width:540px){
  .g2,.g3,.g4{grid-template-columns:1fr 1fr} .wall{columns:2;column-gap:14px}
  form.inq{grid-template-columns:1fr} form.inq .full{grid-column:1}
  .foot-grid{grid-template-columns:1fr}
  .listrow{grid-template-columns:1fr;gap:4px} .listrow .bd{grid-column:1}
  .hero .img{aspect-ratio:3/4}
}