:root {
  --ink: #141414;
  --muted: #8a8a86;
  --paper: #f4f4f2;
  --rule: #d6d6d2;
  --body: 12px;
  --small: 10px;
  --face: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0; padding: 0 26px 110px;
  background: var(--paper); color: var(--ink);
  font-family: var(--face); font-size: var(--body); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1500px; margin: 0 auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--muted); }

/* One header for all three arrangements: name left, links right, no rule. Cargo's basic
   templates all do this and it stays out of the way of the work. */
header.site { display: flex; justify-content: space-between; align-items: baseline;
              gap: 20px; padding: 22px 0 40px; }
header.site nav a { margin-left: 16px; }

/* ⚠️ THE CAPTION IS A ROW, not a block under a thumbnail — number and title hard left,
   details hard right, aligned to the image's edges. It is the single detail that makes
   Cargo's templates read as publications rather than galleries, and it is shared by all
   three arrangements so they cannot drift apart. */
.caption { display: flex; justify-content: space-between; gap: 30px;
           font-size: var(--small); margin-top: 10px; }
.caption .n { color: var(--muted); margin-right: 10px; }
.caption .t { font-style: italic; }
.caption .d { color: var(--muted); text-align: right; max-width: 52ch; }

.noimg { aspect-ratio: 4 / 3; border: 1px solid var(--rule); }

/* ⚠️ The year is a MARKER, not a headline. An artist's site is organised by year and the
   reader needs to know where they are, but the year is not the work — set at caption size in
   the muted ink, sitting above its group rather than shouting over it. */
.year { font-size: var(--small); font-weight: normal; color: var(--muted);
        letter-spacing: .14em; margin: 54px 0 14px; }
.year:first-child { margin-top: 0; }

/* The filter reads as one line of words. Current is simply not muted. */
nav.filter { margin: -20px 0 34px; font-size: var(--small); }
nav.filter a { color: var(--muted); margin-right: 14px; }
nav.filter a.on, nav.filter a:hover { color: var(--ink); }

article.work-page .record { display: flex; justify-content: space-between; gap: 30px;
                            font-size: var(--small); margin-bottom: 26px; }
article.work-page .record .t { font-style: italic; }
article.work-page .record .d { color: var(--muted); text-align: right; max-width: 52ch; }
article.work-page img { width: 100%; height: auto; display: block; margin-bottom: 26px; }
article.work-page .statement { max-width: 56ch; color: var(--muted); margin: 0 0 26px; }
.back { display: inline-block; color: var(--muted); }

article.about { max-width: 68ch; }
article.about .lede { color: var(--muted); margin-top: 0; }
article.about h2 { font-size: var(--small); font-weight: normal; letter-spacing: .14em;
                   text-transform: uppercase; color: var(--muted); margin: 34px 0 10px; }
article.about p { margin: 0 0 12px; }
ul.cv { list-style: none; padding: 0; margin: 0; }
ul.cv li { padding: 2px 0; }
footer.site { margin-top: 70px; color: var(--muted); font-size: var(--small); }
/* GRID — thumbnails. Tight gutters, because the images are the structure and a wide
   gap turns a grid into a list. */
.works { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
         gap: 34px 14px; }
/* ⚠️ Without this the heading takes one cell and the year appears to label a single
   painting rather than the run beneath it. */
.works .year { grid-column: 1 / -1; }
.work { display: block; }
.work img { width: 100%; height: auto; display: block; }
.work .caption { display: block; }
.work .caption .d { text-align: left; max-width: none; }
@media (max-width: 640px) {
  body { padding: 0 15px 70px; }
  header.site { padding-bottom: 24px; }
  .caption { flex-direction: column; gap: 2px; }
  .caption .d { text-align: left; max-width: none; }
  article.work-page .record { flex-direction: column; gap: 2px; }
  article.work-page .record .d { text-align: left; }
  .works { grid-template-columns: 1fr !important; }
}