/*
 * Kaatje Vermeire — grafiek & illustratie
 *
 * Artwork on paper: a warm, slightly grainy paper background, a white
 * passe-partout frame around the window (as on the old site), ink-dark type,
 * EB Garamond set large for display and for reading, Instrument Sans in
 * sentence case for navigation and small labels.
 *
 * The colours below are the default theme. The other themes, chosen under
 * "Instellingen", each take their palette from one of the books and only
 * redefine these tokens (see "Themes" at the end of this file).
 */

:root {
  --paper: #f5f2ec;
  --paper-deep: #ebe6dc;
  --mat: #fdfcf9;
  --ink: #262522;
  --ink-soft: #585249;
  --ink-faint: #8b8478;
  --rule: #d9d2c5;
  --accent: #1f6a67;      /* the teal of the old site (#077777), softened */
  --accent-soft: #6f8f8d;
  --mark: color-mix(in srgb, var(--accent) 25%, transparent);   /* text selection */
  --wash-rgb: 250 248 244;                                     /* the wash over the hero image */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .33 0 0 0 0 .28 0 0 0 0 .22 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  --serif: "EB Garamond", Garamond, "Times New Roman", serif;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  --frame: clamp(8px, 1.3vw, 18px);
  --gutter: clamp(16px, 4vw, 48px);
  --wide: 1280px;
  --measure: 38rem;
  --header-height: 6.5rem;

  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Arrows drawn as masks rather than text characters, which fall back to other fonts */
  --arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E");
  --arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H4M10 6l-6 6 6 6'/%3E%3C/svg%3E");
  --arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v16M6 14l6 6 6-6'/%3E%3C/svg%3E");
  --arrow-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background-color: var(--paper);
  /* fine paper grain */
  background-image: var(--grain);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

/* The passe-partout */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  border: var(--frame) solid var(--mat);
  pointer-events: none;
  z-index: 50;
}

main { flex: 1; }

img { max-width: 100%; height: auto; }

/* An invisible layer over artwork, so "Save image as…" and dragging don't reach the image. */
img { -webkit-user-drag: none; user-select: none; }
.protect { position: relative; -webkit-touch-callout: none; }
.protect::after { content: ""; position: absolute; inset: 0; }
.prose .attachment--preview { position: relative; -webkit-touch-callout: none; }
.prose .attachment--preview::after { content: ""; position: absolute; inset: 0; }

a { color: inherit; }

::selection { background: var(--mark); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.more-link a::after,
.pager__next a::after,
.pager__previous a::before,
.book__links a::after {
  content: "";
  display: inline-block;
  width: .9em;
  height: .9em;
  margin-left: .45em;
  vertical-align: -.1em;
  background: currentColor;
  -webkit-mask: var(--arrow, var(--arrow-right)) center / contain no-repeat;
  mask: var(--arrow, var(--arrow-right)) center / contain no-repeat;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 1rem;
  z-index: 100;
  padding: .6rem 1rem;
  background: var(--ink);
  color: var(--paper);
}
.skip-link:focus { left: calc(var(--frame) + 1rem); }

.wrap {
  width: 100%;
  max-width: calc(var(--wide) + 2 * (var(--frame) + var(--gutter)));
  margin-inline: auto;
  padding-inline: calc(var(--frame) + var(--gutter));
}

.kicker {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .72rem;
  line-height: 1.5;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.stroke {
  display: block;
  width: 7.5rem;
  height: .5rem;
  margin: 1.1rem auto 0;
  color: var(--accent-soft);
  overflow: visible;
}

/* ---------- Header & navigation ---------- */

.site-header {
  position: relative;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-height);
  padding: var(--frame) calc(var(--frame) + var(--gutter)) 0;
}

.brand {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  text-decoration: none;
  color: var(--ink);
}

.brand__name {
  font-size: 1.55rem;
  line-height: 1.05;
}

.brand__tagline {
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--ink-soft);
}

/* On the homepage the menu floats over the illustration, as on the old site. */
.is-home .site-header { position: absolute; inset: 0 0 auto; }
.is-home .brand { visibility: hidden; }

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.6vw, 2.6rem);
}

.site-nav a {
  position: relative;
  padding: .5rem 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .92rem;
  text-decoration: none;
  color: var(--ink);
  transition: color .25s;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .2rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}

.site-nav a:hover { color: var(--accent); }
.site-nav a:hover::after,
.site-nav a[aria-current]::after { transform: scaleX(1); }
.site-nav a[aria-current] { color: var(--accent); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: .6rem;
  padding: .6rem 0 .6rem .6rem;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 500;
  font-size: .92rem;
  cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before {
  display: block;
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: transform .3s var(--ease);
}
.nav-toggle__bars { position: relative; transform: translateY(-3px); }
.nav-toggle__bars::before { content: ""; position: absolute; top: 6px; }

@media (max-width: 760px) {
  :root { --header-height: 5rem; }

  .nav-toggle { display: flex; position: relative; z-index: 2; }

  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    justify-content: center;
    gap: 1.6rem;
    background: var(--paper);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
  }

  .site-nav a {
    font-family: var(--serif);
    font-size: 2.4rem;
    font-weight: 400;
    }
  .site-nav a::after { display: none; }

  .site-header[data-open] .site-nav { opacity: 1; visibility: visible; }
  .site-header[data-open] .brand { visibility: visible; position: relative; z-index: 2; }
  .site-header[data-open] .nav-toggle__bars { transform: translateY(0) rotate(45deg); }
  .site-header[data-open] .nav-toggle__bars::before { transform: translateY(-6px) rotate(-90deg); }
}

/* ---------- Home ---------- */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: end;
  align-items: end;
  gap: 1.5rem 3rem;
  height: 100svh;
  min-height: 32rem;
  padding: 0 calc(var(--frame) + var(--gutter)) calc(var(--frame) + clamp(1.75rem, 4vw, 3.25rem));
  overflow: hidden;
  isolation: isolate;
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  z-index: -2;
  animation: fade-in 1.6s var(--ease) both;
}

/* The illustration stays at full strength; a soft white wash only behind the name
   (bottom left) and, lighter, behind the menu. --wash comes from the site settings. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 60% at 0% 100%,
      rgb(var(--wash-rgb) / calc(var(--wash) + .35)) 0%,
      rgb(var(--wash-rgb) / var(--wash)) 45%,
      rgb(var(--wash-rgb) / 0) 100%),
    linear-gradient(rgb(var(--wash-rgb) / calc(var(--wash) * .7)), rgb(var(--wash-rgb) / 0) 10rem);
}

.hero__title {
  margin: 0 0 0 -.04em;
  font-weight: 400;
  font-size: clamp(3.4rem, 10vw, 9.5rem);
  line-height: .9;
  text-wrap: balance;
  animation: rise 1.4s .2s var(--ease) both;
}

.hero__tagline {
  margin: clamp(.8rem, 1.6vw, 1.3rem) 0 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  color: var(--ink-soft);
  animation: rise 1.4s .45s var(--ease) both;
}

.hero__more {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-bottom: .3rem;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .92rem;
  text-decoration: none;
  color: var(--ink);
  animation: fade-in 1s 1.2s both;
  transition: color .25s;
}
.hero__more::after {
  content: "";
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask: var(--arrow-down) center / contain no-repeat;
  mask: var(--arrow-down) center / contain no-repeat;
  transition: translate .35s var(--ease);
}
.hero__more:hover { color: var(--accent); }
.hero__more:hover::after { translate: 0 .2em; }

@media (max-width: 640px) {
  .hero { grid-template-columns: 1fr; }
}

@keyframes fade-in { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(.6rem); } }

.section { padding-top: clamp(4rem, 9vw, 7rem); }

.section-head {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}

.section-head__title {
  margin: 0 0 .4rem;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.1;
}

.more-link {
  margin: 1rem 0 0;
  text-align: center;
}
.more-link a {
  font-family: var(--sans);
  font-weight: 500;
  font-size: .95rem;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding-bottom: .35rem;
  transition: color .25s, border-color .25s;
}
.more-link a:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- Page headings ---------- */

.page-head {
  padding: clamp(2.5rem, 7vw, 5.5rem) var(--gutter) clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}

.page-head__title {
  margin: 0;
  font-weight: 400;
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  line-height: 1;
  text-wrap: balance;
}

.page-head__title--serif {
  margin: .6rem auto 0;
  max-width: 20ch;
}

/* ---------- Portfolio grid ---------- */

.masonry {
  columns: 3 18rem;
  column-gap: clamp(1.25rem, 2.6vw, 2.5rem);
}

.masonry--js {
  display: flex;
  align-items: flex-start;
  gap: clamp(1.25rem, 2.6vw, 2.5rem);
  columns: auto;
}
.masonry__column { flex: 1; min-width: 0; }

.card {
  break-inside: avoid;
  margin-bottom: clamp(2rem, 3.6vw, 3.25rem);
}

.card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.card__figure {
  margin: 0;
  overflow: hidden;
  background: var(--paper-deep);
}

.card__figure img {
  display: block;
  width: 100%;
  transition: transform 1.2s var(--ease), opacity .6s;
}

.card__title {
  margin: .9rem 0 0;
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.25;
  text-wrap: balance;
  transition: color .25s;
}

.card__meta {
  margin: .25rem 0 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.card__link:hover img { transform: scale(1.03); }
.card__link:hover .card__title { color: var(--accent); }

/* ---------- Text ---------- */

.prose {
  max-width: calc(var(--measure) + 2 * (var(--frame) + var(--gutter)));
  font-size: clamp(1.13rem, 1.05rem + .3vw, 1.3rem);
  line-height: 1.62;
  text-wrap: pretty;
}

.prose p,
.prose ul,
.prose ol,
.prose blockquote,
.prose figure { margin: 0 0 1.05em; }

.prose > .trix-content > :last-child,
.prose > :last-child { margin-bottom: 0; }

.prose a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  overflow-wrap: anywhere;
}
.prose a:hover { color: var(--ink); }

.prose h1, .prose h2, .prose h3 {
  margin: 2.2em 0 .7em;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .9rem;
  color: var(--ink);
}

.prose blockquote {
  margin: 1.6em 0;
  padding: .1em 0 .1em 1.3em;
  border-left: 1px solid var(--accent-soft);
  font-style: italic;
  color: var(--ink-soft);
}
.prose blockquote em { font-style: normal; }
.prose blockquote p:last-child { margin-bottom: 0; }

.prose ul { padding-left: 1.15em; }
.prose li { margin-bottom: .35em; }
.prose li::marker { color: var(--accent-soft); }

.prose img { display: block; height: auto; }
.prose figcaption { font-size: .9em; color: var(--ink-faint); }
.prose .attachment { text-align: center; }

/* ---------- Project ---------- */

.project__text { margin-bottom: clamp(3rem, 7vw, 5.5rem); }

/* Rows of images at one height: each image grows in proportion to its aspect ratio (--ratio). */
.gallery {
  --gap: clamp(.9rem, 2.2vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.gallery__row {
  display: flex;
  gap: var(--gap);
  width: calc(var(--width) * 100%);
  margin-inline: auto;
}

.gallery__item {
  display: block;
  flex: var(--ratio) 1 0;
  min-width: 0;
  cursor: zoom-in;
  background: var(--paper-deep);
}

.gallery__item img { display: block; width: 100%; transition: opacity .3s; }
.gallery__item:hover img { opacity: .92; }

@media (max-width: 640px) {
  .gallery__row { display: contents; }
  .gallery__item { flex: none; }
}

.lightbox {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--paper);
  color: var(--ink);
}
.lightbox[open] { display: grid; place-items: center; animation: fade-in .3s; }
.lightbox::backdrop { background: transparent; }

.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin: 0;
  padding: 4.5rem 4.5rem 1.5rem;
}

.lightbox__frame { display: flex; }

.lightbox__image {
  max-width: min(100%, 2400px);
  max-height: calc(100dvh - 10rem);
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 20px 40px -24px rgb(40 30 20 / .4);
}

/* While the next image loads, image and caption are hidden, then fade in together. */
.lightbox__image,
.lightbox__caption { transition: opacity .35s; }
.lightbox.is-loading :is(.lightbox__image, .lightbox__caption) { opacity: 0; transition: none; }

.lightbox__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: .2rem 1.25rem;
  max-width: 40rem;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.4;
  text-align: center;
  color: var(--ink-soft);
}
.lightbox__text:empty { display: none; }

.lightbox__counter {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 500;
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}

.lightbox__button {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.lightbox__button svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lightbox__button:hover { background: var(--paper-deep); color: var(--accent); }
.lightbox__button--prev { left: 1rem; top: 50%; translate: 0 -50%; }
.lightbox__button--next { right: 1rem; top: 50%; translate: 0 -50%; }
.lightbox__button--close { right: 1rem; top: 1rem; }

@media (max-width: 640px) {
  .lightbox__figure { padding: 4rem .75rem 5rem; }
  .lightbox__image { max-height: calc(100dvh - 13rem); }
  .lightbox__caption { flex-direction: column; align-items: center; }
  .lightbox__button--prev, .lightbox__button--next { top: auto; bottom: 1rem; translate: none; }
}

.pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 1.5rem;
  margin-top: clamp(4rem, 8vw, 6.5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
  background-clip: content-box;
}

.pager a {
  text-decoration: none;
  color: var(--ink);
  transition: color .25s;
}
.pager a:hover { color: var(--accent); }

.pager__previous a::before { --arrow: var(--arrow-left); margin: 0 .45em 0 0; }
.pager__next { text-align: right; }

.pager__previous a, .pager__next a {
  font-size: 1.15rem;
  font-style: italic;
}

.pager__all {
  font-family: var(--sans);
  font-weight: 500;
  font-size: .92rem;
}

@media (max-width: 640px) {
  .pager { grid-template-columns: 1fr 1fr; }
  .pager__all { grid-row: 2; grid-column: 1 / -1; text-align: center; }
}

/* ---------- Bibliography ---------- */

.books {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  gap: clamp(3rem, 6vw, 4.5rem) clamp(1.5rem, 3.5vw, 3rem);
}

.book { scroll-margin-top: 2rem; }

/* Covers stand on a common "shelf" line. */
.book__cover {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 17rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--rule);
}

.book__cover img {
  width: auto;
  max-width: 82%;
  max-height: 100%;
  box-shadow: 0 1px 1px rgb(0 0 0 / .08), 6px 14px 22px -14px rgb(40 30 20 / .45);
}

.book__title {
  margin: .35rem 0 .8rem;
  font-weight: 400;
  font-size: 1.32rem;
  line-height: 1.2;
  text-wrap: balance;
}

.book__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .15rem .9rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
}

.book__meta dt {
  padding-top: .28em;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.book__meta dd { margin: 0; }

.book__note {
  margin: .8rem 0 0;
  font-size: .98rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--ink-soft);
}

.book__links {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.2rem;
  margin: 1rem 0 0;
}

.book__links a {
  font-family: var(--sans);
  font-weight: 500;
  font-size: .88rem;
  text-decoration: none;
  color: var(--accent);
}
.book__links a.is-external::after { --arrow: var(--arrow-external); }
.book__links a:hover { color: var(--ink); }

.translations {
  max-width: calc(64rem + 2 * (var(--frame) + var(--gutter)));
  padding-top: clamp(5rem, 11vw, 8rem);
  scroll-margin-top: 1rem;
}

.translation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 1rem 3rem;
  padding: 2rem 0;
  border-top: 1px solid var(--rule);
}

.translation__title {
  margin: 0;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.2;
}

.translation__english {
  display: block;
  margin-top: .35rem;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink-soft);
}

.translation__list { line-height: 1.85; }
.translation__list em {
  display: inline-block;
  min-width: 11.5rem;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 500;
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.translation__list a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .2em; }

@media (max-width: 760px) {
  .translation { grid-template-columns: 1fr; }
  .translation__list em { min-width: 9.5rem; }
}

/* ---------- Pages ---------- */

.page__figure {
  margin: 0 auto clamp(3rem, 6vw, 4.5rem);
  max-width: calc(68rem + 2 * (var(--frame) + var(--gutter)));
}
.page__figure .protect { display: block; }
.page__figure img { display: block; width: 100%; }

/* ---------- Works for sale ---------- */

.page-head__intro {
  max-width: 30rem;
  margin: 1.4rem auto 0;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink-soft);
}

.artworks { max-width: calc(72rem + 2 * (var(--frame) + var(--gutter))); }

.artwork {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: start;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-bottom: clamp(3.5rem, 7vw, 5.5rem);
  scroll-margin-top: 2rem;
}
.artwork + .artwork { padding-top: clamp(3.5rem, 7vw, 5.5rem); border-top: 1px solid var(--rule); }

.artwork__photos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .75rem;
}

.artwork__photo {
  display: block;
  cursor: zoom-in;
  background: var(--paper-deep);
}
.artwork__photo img { display: block; transition: opacity .3s; }
.artwork__photo:hover img { opacity: .9; }

/* Extra photos: small, uncropped */
.artwork__photo:not(.artwork__photo--main) img { width: auto; height: 5.5rem; }
.artwork__photo--main { flex-basis: 100%; }
.artwork__photo--main img { width: 100%; }

.artwork__text { position: sticky; top: calc(var(--frame) + 2rem); }

.artwork__title {
  margin: 0;
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 1.1;
  text-wrap: balance;
}

.artwork__price {
  margin: .7rem 0 1.6rem;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.artwork__description {
  margin: 0 0 2rem;
  padding: 0;
  font-size: 1.15rem;
}

.artworks__empty {
  text-align: center;
  font-style: italic;
  color: var(--ink-soft);
}

@media (max-width: 760px) {
  .artwork { grid-template-columns: 1fr; }
  .artwork__text { position: static; }
}

/* ---------- Button ---------- */

.button {
  display: inline-block;
  padding: .95rem 1.9rem;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}
.button:hover { background: var(--ink); color: var(--paper); }

/* ---------- Footer ---------- */

.site-footer {
  margin-top: clamp(5rem, 11vw, 9rem);
  padding: 3rem calc(var(--frame) + var(--gutter)) calc(var(--frame) + 2.5rem);
  text-align: center;
  color: var(--ink-soft);
}

.site-footer__name {
  margin: 0 0 .9rem;
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--ink);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.6rem;
  margin-bottom: 1rem;
}

.site-footer__links a {
  font-style: italic;
  text-decoration: none;
}
.site-footer__links a:hover { color: var(--accent); }

.site-footer__copy {
  margin: 0;
  font-size: .9rem;
  color: var(--ink-faint);
}

/* ---------- Edit shortcut for Kaatje ---------- */

.admin-bar {
  position: fixed;
  right: calc(var(--frame) + .75rem);
  bottom: calc(var(--frame) + .75rem);
  z-index: 60;
  display: flex;
  gap: .4rem;
}

.admin-bar a {
  padding: .65rem 1rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 600;
  font-size: .8rem;
  text-decoration: none;
  box-shadow: 0 6px 20px -8px rgb(0 0 0 / .4);
}
.admin-bar a:first-child:not(:only-child) { background: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Themes ---------- */

/* Witje: the blue-grey mist of the mosquito net, slate-blue ink, and the pale
   yellow of the spine for highlights. The grain is cooled to match. */
:root[data-theme="witje"] {
  --paper: #edf1f0;
  --paper-deep: #dfe6e6;
  --mat: #fafcfc;
  --ink: #1e2a33;
  --ink-soft: #475866;
  --ink-faint: #6f7f8a;
  --rule: #cbd5d8;
  --accent: #36547a;
  --accent-soft: #94a7b1;
  --mark: #f0dc84;
  --wash-rgb: 246 249 249;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .27 0 0 0 0 .34 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Muurtje (Samen over een muurtje): antique cream paper, brown-black ink and the
   oxblood of the cloth spine. */
:root[data-theme="muurtje"] {
  --paper: #f6eed9;
  --paper-deep: #ecdfc0;
  --mat: #fffbf1;
  --ink: #2b1d1a;
  --ink-soft: #5c4540;
  --ink-faint: #8a7469;
  --rule: #e2d2b2;
  --accent: #8d1e35;
  --accent-soft: #b8817a;
  --wash-rgb: 251 246 233;
}

/* Lijstjes (Over lijstjes, pannenkoeken en een geheim plan): kraft paper, sepia
   ink. The orange title band is too light for text, so it is only the soft accent;
   links get a burnt shade of it. */
:root[data-theme="lijstjes"] {
  --paper: #ebe2cb;
  --paper-deep: #ddd1b3;
  --mat: #f9f4e7;
  --ink: #2c2619;
  --ink-soft: #574b33;
  --ink-faint: #7d6f53;
  --rule: #cdbf9e;
  --accent: #9c4f12;
  --accent-soft: #d38a35;
  --mark: color-mix(in srgb, #d38a35 40%, transparent);
  --wash-rgb: 243 236 219;
}

/* Ans & Wilma (Verdwaald): blush paper from the skin tones, jungle green for links,
   the tomato red of the dress for the brush stroke and Wilma's yellow hair for
   highlights. Red and yellow are too light for text and stay decorative. */
:root[data-theme="ans-en-wilma"] {
  --paper: #f8eee6;
  --paper-deep: #e6ecd6;
  --mat: #fffaf5;
  --ink: #1f2a24;
  --ink-soft: #4a5546;
  --ink-faint: #767a68;
  --rule: #e5cfc0;
  --accent: #2f6a27;
  --accent-soft: #d0543a;
  --mark: #f3d35b;
  --wash-rgb: 252 244 238;
}