: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); }
/* SLIDESHOW — a scroll-snap strip. ⚠️ No JavaScript: this swipes on a phone, scrolls
   with a trackpad, and the arrows are ordinary links to #ids. A script would have
   been the obvious way and would have made the site a program instead of a folder. */
.works { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
         gap: 0; scroll-behavior: smooth;
         scrollbar-width: none; -ms-overflow-style: none; }
.works::-webkit-scrollbar { display: none; }
.work { flex: 0 0 100%; scroll-snap-align: center;
        display: flex; flex-direction: column; align-items: center;
        justify-content: center; min-height: 72vh; }
.work img { max-width: 92%; max-height: 72vh; width: auto; height: auto; display: block; }
.work .caption { justify-content: center; gap: 16px; text-align: center; }
.work .caption .d { text-align: center; }
.slidenav { display: flex; justify-content: space-between; margin-top: 18px;
            font-size: var(--small); color: var(--muted); }
@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; }
}