/* ============================================================
   aesek.com
   Dark is the default and only auto state, by design:
   the site always loads dark, the visitor opts into light.
   ============================================================ */
:root{
  /* Dark is the default, and it lives here rather than in JavaScript so it
     holds even if scripts never run.
     color-scheme tells the browser which tone to paint its own chrome in -
     scrollbars, the text caret, form controls. */
  color-scheme:dark;

  --paper:#141311;
  --ink:#EBE8E2;
  --muted:#8B8780;
  --line:#2B2926;
  --art-void:#242220;
  --hover:rgba(235,232,226,.065);
  --active:rgba(235,232,226,.135);
  /* footer marks on hover: partway from --muted toward --ink, not all the
     way. Enough to register, not enough to pull the eye down the page. */
  --mark-hi:#C5C1BB;

  --hdr-h:64px;
  --radius:8px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --t:420ms;

  --f-ui:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
}
/* the visitor opting into light */
html[data-mode="light"]{
  color-scheme:light;

  --paper:#F6F5F2;
  --ink:#1C1B19;
  --muted:#8A867E;
  --line:#E4E1DB;
  --art-void:#EDEBE6;
  --hover:rgba(28,27,25,.045);
  --active:rgba(28,27,25,.10);
  --mark-hi:#484641;
}

*{box-sizing:border-box;}
/* the grid and the large view are both in the HTML; this is what actually
   hides the inactive one. Browsers' own [hidden] rule loses to the display
   set on .grid and .stream below. */
[hidden]{display:none !important;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-ui);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background-color var(--t) var(--ease), color var(--t) var(--ease);
}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;}
img{max-width:100%;display:block;}
:focus-visible{outline:1.5px solid var(--ink);outline-offset:3px;}

/* ---------- cursor ----------
   Hand-drawn arrow, 23px, hotspot at the tip. Carries a thin outline in the
   opposite tone so it stays legible crossing black-and-white artwork, not just
   against the page. Plain url() first for browsers without image-set in
   cursor; the image-set line then upgrades it to 2x on retina. */
body{cursor:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAC7klEQVR4nKyVW0xSYRzAv+8cG3LO4YBODcQxV6aw+dAqNc1KENqkKUcQjIvWVhN87cWlveh8a+vBqHXbmnZx48HletHKS9mWtlaZEs3Wemiix8tDZnCmyOlgi6mI4OX3yPffb/8b/4MwDHNgbnZqvP/lc/+3CU83wyyqWZaFYA+AM/TU2/Ly8rzJyUkUQRBWc0YDqwz6qZPFp9pwJOEBJAga7BA4ONAXsNls6MYHsVjMWi1mVqfTPUvPkDp5PLwPQsiCbQDn5+gXhYVFSp/Ph24WgKIoq9aoYSVFTStLlDcxArkLoWAmLrnP99vY2trq6mjviBkslUqDJpMRcG3skUllN3g43rtVNZAb3r6xzx9prfZsEoiT0GzU6lJIUZV0qUrljFbN6lb4FheuGU2my6OjowjYJhKJJGiqNgGubb0Z6RInDyN7uGqCYTnD/DrkcnVNNF5pBDslVI1KpYJ6vX5eWVLSRpCi6+F9np3xvioqKj7h9/tRsEsUCgXo7HzyNNwGnCDvUBS1a3EIj8cD3G63Jizn8/Euo9GwAPYAPj+RzTqY9SEs54bA5ObmtsvlihWwQ0Qi0fLVpiYwPDI8JkpOObduOxAUOs3m6m23hiTJlYaGBjA42P+j9sJ5c3Jy2mEcx70RB4qe9o4UFBTkBQKBmMdLICCDdXWXEO58fCcwrDkRJx//X8PVZCOyIIjblE4XU1xlMHCZDvx02O0XU1LFcj4hfLhWHCJCwv1jsTdDA7NmsxWLJsYwbGVo6PW7tP3ppznhcrS4iMy5YN+Ro8ceyWSyqIO12+2okBC2bCXeVP4P9F5tTQ0aLWurzfIpkSB6QAw2lXOTfl+hq3AnJCQEN745HHaUG2QziIOoh0ooSrqlLStb9x7K2mKxejBM0A12I8cwot1kNC6t/a2+3oGSQrIl3i9SVDkn+JN/PP9+To58dbCZmZlL3D5/5fMJF4iTLfc5tJY07XV+GXebs3Oy51LTUrQ8HjEG4uQvAAAA//88RBdUAAAABklEQVQDAKwb8e7ruZ7BAAAAAElFTkSuQmCC) 1 1,auto;}
body{cursor:image-set(url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAC7klEQVR4nKyVW0xSYRzAv+8cG3LO4YBODcQxV6aw+dAqNc1KENqkKUcQjIvWVhN87cWlveh8a+vBqHXbmnZx48HletHKS9mWtlaZEs3Wemiix8tDZnCmyOlgi6mI4OX3yPffb/8b/4MwDHNgbnZqvP/lc/+3CU83wyyqWZaFYA+AM/TU2/Ly8rzJyUkUQRBWc0YDqwz6qZPFp9pwJOEBJAga7BA4ONAXsNls6MYHsVjMWi1mVqfTPUvPkDp5PLwPQsiCbQDn5+gXhYVFSp/Ph24WgKIoq9aoYSVFTStLlDcxArkLoWAmLrnP99vY2trq6mjviBkslUqDJpMRcG3skUllN3g43rtVNZAb3r6xzx9prfZsEoiT0GzU6lJIUZV0qUrljFbN6lb4FheuGU2my6OjowjYJhKJJGiqNgGubb0Z6RInDyN7uGqCYTnD/DrkcnVNNF5pBDslVI1KpYJ6vX5eWVLSRpCi6+F9np3xvioqKj7h9/tRsEsUCgXo7HzyNNwGnCDvUBS1a3EIj8cD3G63Jizn8/Euo9GwAPYAPj+RzTqY9SEs54bA5ObmtsvlihWwQ0Qi0fLVpiYwPDI8JkpOObduOxAUOs3m6m23hiTJlYaGBjA42P+j9sJ5c3Jy2mEcx70RB4qe9o4UFBTkBQKBmMdLICCDdXWXEO58fCcwrDkRJx//X8PVZCOyIIjblE4XU1xlMHCZDvx02O0XU1LFcj4hfLhWHCJCwv1jsTdDA7NmsxWLJsYwbGVo6PW7tP3ppznhcrS4iMy5YN+Ro8ceyWSyqIO12+2okBC2bCXeVP4P9F5tTQ0aLWurzfIpkSB6QAw2lXOTfl+hq3AnJCQEN745HHaUG2QziIOoh0ooSrqlLStb9x7K2mKxejBM0A12I8cwot1kNC6t/a2+3oGSQrIl3i9SVDkn+JN/PP9+To58dbCZmZlL3D5/5fMJF4iTLfc5tJY07XV+GXebs3Oy51LTUrQ8HjEG4uQvAAAA//88RBdUAAAABklEQVQDAKwb8e7ruZ7BAAAAAElFTkSuQmCC) 1x,url(data:image/png;base64,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) 2x) 1 1,auto;}
html[data-mode="dark"] body{cursor:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAADE0lEQVR4nKyV60tTYRzHn3NOWzIdUmwx01V4AydmvfBCU7wsszRKJChRrDcWQfSm/gGDIgrfrRAvmbXNpWxtaWbUnLaUJqWCuK1Cp0K6+zmbu29n60xQRLc5L184L87v9+PD7/Y8D5KYmJh6jH5UUcxmt8QdPpyPB7wml8ujBQcghEGnDUokotybjfXkhoa6zMyMjEYQDNw2GowkGEH++nw+B9ijoMoLHD/vTRey1bGyshIUCnuD0oHBfp1umWs2W2WEOQh2ISj5eNKXccVwGSU+HgkX4Pf7g19lw5BU+kEnH/32wuPxt9ntdkMscIREQtw0Gu16bu7psAEwDEPp6WngcnVVQk3NlVJqQvxDzIIV+HGPhZjNXDQ4RHyk/Lyz+o/90iMgRuE4HpQNy0PV6GXyEW6kakKtCLjcHlpx0blCBoMBxQIPVZOWlgqqqy4l1NZeLaVSE4hq0EKf34O63WvVBNfhgEQiLxDU+xxOGditqFQqVFiQDxGblp7NYtXDCHTPYDDExTtdvzYyPcFMGlWMytkUCgUB+5RKpQb1DbckGyASQvISbbmWk5MN9is6nQ4U38eZ8LrBhKLiPpHYBg5ADqczqJ2fn4Q32dyqWVW3Wq3GwR5lQVHf4ydPAbuoZAa16m9shgPIj3Pf9Yl23XMMw/Bnz1sAp+Kitvstr+7fsv6MyeRc3rZ6p5gpyrGxkTwymbzjWlqttkDnqy6Yz++Zc9idzWYM4xPmwLp/W5bwIRhnpiTXsLKyooJF4veg6c7dpfEfygc6vbHJ5XZPgy13T7jsKBXny40C3mtKJLDD4cBLyysnFhaXSohfX6Q4OIzNOTU5xVtcXIo42Lb2TsS2ij2KBo4EJy6PQDuPLwg7WCeRtaBHOG2x2IbADgoLN1mtP/sHBmeJhyKw1dfa3oGs2u3NIAbBkRwYan35aegzvC1rQa/abMakYD9wM4p2i8QS72Zba1sH0WtrqNcxvUhwFJ9DOaHs0Gg0a4Od1y54BXyhBkVtvSBG7XRQKKknmdwsFqtO8/uPyYJiVSiKzoAY9R8AAP//8O8rAAAAAAZJREFUAwDWq2VRZJbBKgAAAABJRU5ErkJggg==) 1 1,auto;}
html[data-mode="dark"] body{cursor:image-set(url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAADE0lEQVR4nKyV60tTYRzHn3NOWzIdUmwx01V4AydmvfBCU7wsszRKJChRrDcWQfSm/gGDIgrfrRAvmbXNpWxtaWbUnLaUJqWCuK1Cp0K6+zmbu29n60xQRLc5L184L87v9+PD7/Y8D5KYmJh6jH5UUcxmt8QdPpyPB7wml8ujBQcghEGnDUokotybjfXkhoa6zMyMjEYQDNw2GowkGEH++nw+B9ijoMoLHD/vTRey1bGyshIUCnuD0oHBfp1umWs2W2WEOQh2ISj5eNKXccVwGSU+HgkX4Pf7g19lw5BU+kEnH/32wuPxt9ntdkMscIREQtw0Gu16bu7psAEwDEPp6WngcnVVQk3NlVJqQvxDzIIV+HGPhZjNXDQ4RHyk/Lyz+o/90iMgRuE4HpQNy0PV6GXyEW6kakKtCLjcHlpx0blCBoMBxQIPVZOWlgqqqy4l1NZeLaVSE4hq0EKf34O63WvVBNfhgEQiLxDU+xxOGditqFQqVFiQDxGblp7NYtXDCHTPYDDExTtdvzYyPcFMGlWMytkUCgUB+5RKpQb1DbckGyASQvISbbmWk5MN9is6nQ4U38eZ8LrBhKLiPpHYBg5ADqczqJ2fn4Q32dyqWVW3Wq3GwR5lQVHf4ydPAbuoZAa16m9shgPIj3Pf9Yl23XMMw/Bnz1sAp+Kitvstr+7fsv6MyeRc3rZ6p5gpyrGxkTwymbzjWlqttkDnqy6Yz++Zc9idzWYM4xPmwLp/W5bwIRhnpiTXsLKyooJF4veg6c7dpfEfygc6vbHJ5XZPgy13T7jsKBXny40C3mtKJLDD4cBLyysnFhaXSohfX6Q4OIzNOTU5xVtcXIo42Lb2TsS2ij2KBo4EJy6PQDuPLwg7WCeRtaBHOG2x2IbADgoLN1mtP/sHBmeJhyKw1dfa3oGs2u3NIAbBkRwYan35aegzvC1rQa/abMakYD9wM4p2i8QS72Zba1sH0WtrqNcxvUhwFJ9DOaHs0Gg0a4Od1y54BXyhBkVtvSBG7XRQKKknmdwsFqtO8/uPyYJiVSiKzoAY9R8AAP//8O8rAAAAAAZJREFUAwDWq2VRZJbBKgAAAABJRU5ErkJggg==) 1x,url(data:image/png;base64,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) 2x) 1 1,auto;}
/* links and buttons keep the mark rather than reverting to the OS hand */
a,button{cursor:inherit;}
/* text entry keeps the real caret - never make typing harder */
input,textarea{cursor:text;}

/* ---------- shell ---------- */
.shell{height:100dvh;display:flex;flex-direction:column;overflow:hidden;}

/* ---------- header ---------- */
.hdr{
  height:var(--hdr-h);
  flex:0 0 auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  padding:0 clamp(16px,3vw,32px);
  border-bottom:1px solid var(--line);
  background:var(--paper);
  position:relative;
  z-index:40;
  transition:background-color var(--t) var(--ease),border-color var(--t) var(--ease);
}
.nav{display:flex;align-items:center;gap:2px;margin-left:-10px;}
.nav-link,.chip{
  display:inline-block;
  border-radius:var(--radius);
  font-size:11px;
  font-weight:500;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--muted);
  padding:8px 10px;
  background:transparent;
  transition:background-color 220ms var(--ease),color 220ms var(--ease);
}
.nav-link:hover,.chip:hover{background:var(--hover);color:var(--ink);}
.nav-link.is-active,.chip.is-active{background:var(--active);color:var(--ink);}

.brand{display:flex;align-items:center;justify-self:center;}
.brand svg{height:32px;width:auto;fill:var(--ink);transition:fill var(--t) var(--ease),opacity 260ms var(--ease);}
.brand:hover svg{opacity:.62;}

.utils{display:flex;align-items:center;justify-content:flex-end;gap:clamp(12px,1.6vw,18px);}
.icon{
  display:grid;place-items:center;width:26px;height:26px;color:var(--muted);
  transition:color 260ms var(--ease),transform 320ms var(--ease);
}
.icon svg{width:17px;height:17px;}
.icon--ig svg{width:15.5px;height:15.5px;}  /* solid glyph, sized down optically */
.icon:hover{color:var(--ink);transform:translateY(-1px);}

/* theme button: shows the mode you're currently in */
.theme-btn .sun{display:none;}
html[data-mode="light"] .theme-btn .moon{display:none;}
html[data-mode="light"] .theme-btn .sun{display:block;}

/* ---------- main ---------- */
.main{flex:1;min-height:0;overflow-y:auto;position:relative;display:flex;flex-direction:column;}
#viewHost{flex:1 0 auto;display:flex;flex-direction:column;}
.view{flex:1 0 auto;animation:fade 480ms var(--ease) both;}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* ---------- home ---------- */
/* width drives the size: the image fills the column, runs past the fold,
   and the page scrolls to reveal the rest. Never cropped horizontally. */
.home{
  max-width:1440px;margin:0 auto;
  padding:clamp(22px,4vw,56px) clamp(16px,4vw,56px) clamp(40px,6vw,72px);
}
.home-link{display:block;width:100%;}
.home-art{width:100%;height:auto;}

/* ---------- work ---------- */
.page{
  max-width:1440px;margin:0 auto;
  padding:clamp(22px,4vw,56px) clamp(16px,4vw,56px) clamp(60px,8vw,110px);
}
/* filter + view-mode bar */
.workbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-bottom:12px;margin-bottom:clamp(16px,2.4vw,26px);
  border-bottom:1px solid var(--line);
}
.filters{display:flex;gap:2px;margin-left:-10px;flex-wrap:wrap;}
.viewtoggle{display:flex;gap:2px;}
.vbtn{
  display:grid;place-items:center;width:32px;height:30px;color:var(--muted);
  border-radius:var(--radius);
  transition:background-color 220ms var(--ease),color 220ms var(--ease);
}
.vbtn svg{width:15px;height:15px;}
.vbtn:hover{background:var(--hover);color:var(--ink);}
.vbtn.is-active{color:var(--ink);background:var(--active);}

/* cropped mosaic grid */
.grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(6px,.85vw,12px);
}
@media (max-width:1080px){ .grid{grid-template-columns:repeat(3,1fr);} }
.cell{
  display:block;position:relative;aspect-ratio:1;overflow:hidden;
  background:var(--art-void);
  transition:background-color var(--t) var(--ease);
}
.cell img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 720ms var(--ease),opacity 420ms var(--ease);
}
.cell:hover img{transform:scale(1.04);}
.cell-cap{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  padding:16px;text-align:center;
  background:rgba(17,16,14,.56);
  color:#F5F3EE;
  opacity:0;
  transition:opacity 300ms var(--ease);
}
.cell:hover .cell-cap,.cell:focus-visible .cell-cap{opacity:1;}
.cell-cap .t{
  font-size:11px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;line-height:1.45;
}
.cell-cap .y{
  font-size:10.5px;font-weight:500;letter-spacing:.11em;color:rgba(245,243,238,.7);
}

/* single large view */
.stream{display:flex;flex-direction:column;gap:clamp(48px,7vw,96px);}
.big{display:block;}
.big-frame{display:grid;place-items:center;}
.big img{
  width:auto;max-width:100%;max-height:78dvh;object-fit:contain;
}
/* the artwork is deliberately inert on hover here - it is being read, not
   browsed. The block is still a link into the piece page. */
.big-cap{padding-top:16px;line-height:1.5;}
/* same three-part hierarchy as the piece page: title, description, then the
   tombstone line */
/* the only hover in this view: a hairline under the title, so the block
   reads as clickable without the artwork itself reacting. inline-block so
   the rule hugs the words rather than spanning the column. */
.big-cap .t{
  display:inline-block;font-size:15px;font-style:italic;
  border-bottom:1px solid transparent;padding-bottom:1px;
  transition:border-color 260ms var(--ease);
}
.big:hover .big-cap .t{border-bottom-color:var(--muted);}
.big-cap .desc{display:block;font-size:13px;color:var(--ink);margin-top:5px;}
.big-cap .meta{
  display:block;font-family:var(--f-mono);font-size:11px;color:var(--muted);
  margin-top:8px;font-variant-numeric:tabular-nums;
}

/* ---------- footer ---------- */
.site-foot{
  flex:0 0 auto;
  /* same bar height as the header */
  min-height:var(--hdr-h);
  display:flex;align-items:center;
  padding-block:8px;
  border-top:1px solid var(--line);
  transition:border-color var(--t) var(--ease);
}
.foot-inner{
  width:100%;
  /* the header's padding, not the content column's - so the marks sit
     directly under the nav and the toggle at any window width */
  padding:0 clamp(16px,3vw,32px);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
/* sized to sit at roughly the weight of the nav text, not to fill the bar */
/* muted rather than a flat opacity: --muted is a defined tone in both themes,
   so the mark sits at the same quietness in light and dark instead of just
   fading toward whatever is behind it */
.foot-mark{
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);max-width:100%;
  transition:color 260ms var(--ease);
}
/* each mark comes forward a little on its own hover - a token rather than
   --ink, so it stops short of full strength. It is defined per theme rather
   than as a literal brightening, because in light mode "brighter" would mean
   fainter. */
.foot-mark:hover{color:var(--mark-hi);}
.foot-mark svg{height:13px;width:auto;max-width:100%;display:block;}


/* ---------- piece ---------- */
.piece{
  min-height:calc(100dvh - var(--hdr-h));
  display:grid;
  grid-template-columns:clamp(200px,21vw,290px) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);
  max-width:1440px;margin:0 auto;
  padding:clamp(18px,2.6vw,34px) clamp(16px,4vw,48px) clamp(28px,4vw,48px);
}
.piece-media{
  grid-column:2;grid-row:1;min-height:0;
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(12px,1.6vw,18px);
}
.piece-stage{min-height:0;width:100%;display:grid;place-items:center start;}
.piece-stage img{
  width:auto;max-width:100%;
  max-height:calc(100dvh - var(--hdr-h) - 110px);
  object-fit:contain;
  transition:opacity 240ms var(--ease);
}
.piece-media.has-thumbs .piece-stage img{max-height:calc(100dvh - var(--hdr-h) - 200px);}

.thumbs{display:flex;gap:9px;flex-wrap:wrap;}
.thumb{
  padding:0 0 7px;
  border-bottom:1px solid transparent;
  opacity:.42;
  transition:opacity 240ms var(--ease),border-color 240ms var(--ease);
}
.thumb span{display:block;width:54px;height:54px;background:var(--art-void);overflow:hidden;}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.thumb:hover{opacity:.72;}
.thumb.is-active{opacity:1;border-bottom-color:var(--ink);}
.piece-side{
  display:flex;flex-direction:column;gap:clamp(16px,2.2vw,24px);padding-top:2px;
  grid-column:1;grid-row:1;
}
.piece-back,.pager{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);
}
/* an up key, not a left one: this moves out to the index, while prev/next
   move sideways through the set. The label names the filter the visitor
   arrived from, so the destination is stated rather than implied.
   The negative margin cancels the padding so the key's edge lines up with
   the title below it rather than sitting indented. */
.piece-back{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;margin-left:-10px;
  border-radius:var(--radius);
  transition:background-color 220ms var(--ease),color 220ms var(--ease);
}
.piece-back:hover{background:var(--hover);color:var(--ink);}
.piece-back:hover .keycap{color:var(--ink);}
.pager a:hover{color:var(--ink);}
.label .t{font-size:clamp(18px,2.2vw,22px);font-style:italic;line-height:1.3;}
.label .desc{font-size:14px;line-height:1.5;color:var(--ink);margin-top:7px;}
.label .meta{
  font-family:var(--f-mono);font-size:11.5px;line-height:1.9;color:var(--muted);
  margin-top:9px;font-variant-numeric:tabular-nums;
}
.pager{
  display:flex;gap:4px;margin-top:auto;padding-top:16px;margin-left:-10px;
  border-top:1px solid var(--line);
}
.pager a{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;color:var(--ink);border-radius:var(--radius);
  transition:background-color 220ms var(--ease),color 220ms var(--ease);
}
.pager a:hover{background:var(--hover);}
.keycap{
  width:21px;height:21px;flex:0 0 auto;color:var(--muted);
  transition:color 220ms var(--ease);
}
.pager a:hover .keycap{color:var(--ink);}

/* ---------- prose ---------- */
.prose{max-width:62ch;padding-top:clamp(4px,2vw,20px);}
.prose h1{
  font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 clamp(20px,3vw,30px);
}
.prose p{margin:0 0 1.15em;text-wrap:pretty;}
/* links in running text need to look like links - the global rule strips
   underlines for the nav and the grid, which is wrong inside a paragraph */
.prose a{
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:var(--muted);
  transition:text-decoration-color 220ms var(--ease);
}
.prose a:hover{text-decoration-color:var(--ink);}
.prose .lead{font-size:clamp(17px,2.1vw,20px);line-height:1.5;}
.listing{
  margin-top:clamp(30px,4vw,46px);padding-top:22px;border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:11.5px;line-height:2.1;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.listing b{color:var(--ink);font-weight:500;display:block;margin-bottom:11px;}
/* one row per exhibition: the year keeps its own column, so a long title
   wraps under itself instead of running back under the date */
.ex{display:flex;gap:14px;line-height:1.7;}
.ex + .ex{margin-top:7px;}
.ex-y{flex:0 0 auto;}
/* the credit under the client list. At the same size it reads as one more
   client, so it steps down a point and takes more air above it - a footnote
   by weight as well as by position. */
.listing .note{margin:18px 0 0;font-size:10.5px;line-height:1.7;}

/* ---------- form ---------- */
.form{max-width:min(520px,100%);display:flex;flex-direction:column;gap:18px;margin-top:6px;}
.field{display:flex;flex-direction:column;gap:7px;}
.field label{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.field input,.field textarea{
  font-family:var(--f-ui);font-size:15px;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:9px 0;border-radius:0;
  transition:border-color 300ms var(--ease);
}
.field textarea{resize:vertical;min-height:110px;line-height:1.6;}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--ink);}
.submit{
  align-self:flex-start;margin-top:6px;
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--ink);padding:12px 26px;
  /* same corner as the nav and filter hover rectangles, so every tappable
     block on the site is cut to one shape */
  border-radius:var(--radius);
  transition:background-color 300ms var(--ease),color 300ms var(--ease);
}
.submit:hover{background:var(--ink);color:var(--paper);}
.form-note{font-family:var(--f-mono);font-size:10.5px;color:var(--muted);line-height:1.8;}
.sent{font-family:var(--f-mono);font-size:12px;color:var(--ink);}

/* ---------- mobile ---------- */
@media (max-width:760px){
  :root{--hdr-h:98px;}
  .hdr{
    grid-template-columns:1fr auto;
    grid-template-rows:56px 41px;
    padding:0 clamp(8px,2.5vw,18px);
    row-gap:0;
  }
  .brand{grid-column:1;grid-row:1;justify-self:start;padding-left:10px;}
  .brand svg{height:24px;}
  .utils{grid-column:2;grid-row:1;gap:6px;}
  .nav{
    grid-column:1 / -1;grid-row:2;align-self:start;margin-left:0;
    justify-content:space-between;
    border-top:1px solid var(--line);padding-top:3px;
  }
  .nav-link{padding:8px 9px;}
  /* the mobile header is two rows tall; the footer stays a single bar */
  .site-foot{min-height:56px;}
  .foot-mark svg{height:11px;}
  .workbar{flex-wrap:nowrap;}
  .filters{flex-wrap:nowrap;}
  .chip{padding:8px 7px;letter-spacing:.07em;}
  .home{padding:clamp(16px,5vw,28px);}
  .piece{grid-template-columns:1fr;gap:20px;}
  .piece-media,.piece-side{grid-column:1;grid-row:auto;}
  .piece-media.has-thumbs .piece-stage img{max-height:46dvh;}
  .thumb span{width:46px;height:46px;}
  .piece-stage img{max-height:58dvh;}
  .pager{margin-top:0;}
  .grid{grid-template-columns:repeat(2,1fr);gap:5px;}
  .big img{max-height:62dvh;}
  .cell-cap{padding:26px 9px 9px;}
  .cell-cap .t{font-size:11.5px;}
  .cell-cap .y{font-size:9.5px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}