: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); }
/* FEED — one work per screen. The image is capped by viewport HEIGHT, not column
   width: a painting should be seen whole, and at full width a tall canvas runs off
   the bottom and you scroll through the middle of it. */
.works { display: block; }
.work { display: block; margin: 0 0 90px; }
.work img { display: block; max-width: 100%; max-height: 78vh;
            width: auto; height: auto; }
.work .caption { max-width: 100%; }
@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; }
}