/* Dark Tales — minimal. Edited here, copied to public/ by build.py. */
:root {
  --ink: #ece7df;
  --dim: #9a9086;
  --faint: #6b6259;
  --bg: #0d0b0a;
  --panel: #15120f;
  --line: #2a241e;
  --accent: #c9a227;
  --sold: #8a7f74;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.65 var(--serif);
}
img { max-width: 100%; display: block; }
a { color: var(--ink); }
main { max-width: 1080px; margin: 0 auto; padding: 0 24px 96px; }

/* nav */
.bar {
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5;
  background: rgba(13, 11, 10, 0.94);
  backdrop-filter: blur(6px);
}
.bar nav {
  max-width: 1080px; margin: 0 auto; padding: 0 24px;
  display: flex; gap: 8px;
  font: 600 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
}
.bar a { color: var(--dim); text-decoration: none; display: flex; align-items: center; min-height: 48px; padding: 0 12px; }
.bar a:hover, .bar a.on { color: var(--ink); }

/* hero */
.hero { padding: 80px 0 56px; max-width: 46rem; }
.hero.small { padding: 56px 0 32px; }
h1 { font: 400 clamp(2.6rem, 7vw, 4.4rem)/1.05 var(--serif); margin: 0 0 20px; letter-spacing: -.01em; }
.tagline { font-size: 1.2rem; color: var(--dim); margin: 0 0 20px; }

h2 {
  font: 600 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--faint); margin: 72px 0 28px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
h2 .n { color: var(--line); margin-left: 6px; }
h3 { font: 400 1.35rem/1.25 var(--serif); margin: 0 0 6px; }

/* exhibitions */
.show { margin: 0 0 56px; max-width: 46rem; }
.show .meta { font: 500 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
.show .meta.missing { color: var(--faint); }
.show p { color: var(--dim); }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 22px; max-width: none; }
.photos figure { margin: 0; background: var(--panel); border: 1px solid var(--line); }

/* pillars */
.pillars { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
/* explicit steps 1 -> 2 -> 4, so a 4-card row can never leave an orphan cell */
@media (min-width: 560px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .pillars { grid-template-columns: repeat(4, 1fr); } }
.pillar { background: var(--bg); padding: 28px 24px; }
.pillar.draft { background: var(--panel); }
.pillar .role { font: 500 12px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
.pillar p { color: var(--dim); font-size: .96rem; }
.pillar .echo { color: var(--faint); font-style: italic; border-left: 2px solid var(--line); padding-left: 14px; }
.pillar .count { font: 500 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.pillar .count a { color: var(--faint); }
.badge {
  font: 600 9px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--bg); background: var(--accent); padding: 4px 6px; vertical-align: middle;
}

/* works */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.work { background: var(--bg); display: flex; flex-direction: column; }
.work img { width: 100%; aspect-ratio: 3/2; object-fit: contain; background: var(--panel); }
/* Measured 2026-08-30: all 19 artworks are 3:2 landscape. The old 4:5 cover box
   showed 53% of each one. `contain` never crops, whatever aspect a work arrives in. */
.work .noimg {
  aspect-ratio: 3/2; background: var(--panel); display: grid; place-items: center;
  color: var(--faint); font: 500 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
}
.work .body { padding: 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.work .by { font: 500 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 0; }
.work .facts, .work .shown { font: 400 12px/1.5 var(--sans); color: var(--faint); margin: 0; }
.work .pitch { color: var(--dim); font-size: .95rem; margin: 4px 0 0; flex: 1; }
.work .note { font: 400 12px/1.5 var(--sans); color: var(--faint); margin: 0; }
.avail {
  margin: 10px 0 0; padding-top: 12px; border-top: 1px solid var(--line);
  font: 500 13px/1 var(--sans); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 12px;
}
.avail span { letter-spacing: .14em; text-transform: uppercase; font-size: 11px; }
.avail b { font: 600 15px/1 var(--sans); }
.avail.available span { color: var(--accent); }
.avail.sold span, .avail.fixture span { color: var(--sold); }
.avail.enquire span { color: var(--dim); }

.cta { margin: 80px 0 0; }
.cta a { font: 600 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }

footer {
  border-top: 1px solid var(--line); margin-top: 96px; padding: 40px 24px;
  font: 400 13px/1.7 var(--sans); color: var(--faint);
}
footer p { max-width: 1080px; margin: 0 auto 6px; }
footer .gen { color: var(--line); }

@media (max-width: 640px) {
  .hero { padding: 48px 0 32px; }
  h2 { margin-top: 48px; }
  /* The header was wider than a phone: three letter-spaced links at fixed padding
     with nothing allowed to wrap. Measured 7px over at 320px in Chrome, and Safari's
     wider fonts push it over on ordinary iPhones. Tighter, and free to wrap. */
  /* ONE line, always (operator): the type scales down on the narrowest phones rather
     than wrap, and the labels are short enough ("Bazaar") that it never has to go far. */
  .bar nav { padding: 0 6px; gap: 0; flex-wrap: nowrap; white-space: nowrap;
             letter-spacing: .08em; font-size: clamp(10px, 3.6vw, 12px); }
  .bar a { padding: 0 clamp(5px, 2vw, 8px); min-height: 44px; }
}
/* nothing on any page may be wider than the screen it is on */
html, body { max-width: 100%; }
main, .privacy { overflow-wrap: anywhere; }

/* operation label on a pillar card */
.pillar .op { font: 600 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--faint); margin: 0 0 10px; }

/* an exhibition with no photo recorded: compact dated line */
.show.compact { margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.show.compact h3 { font-size: 1.1rem; margin-bottom: 4px; }
.show.compact .meta { margin: 0; }


/* ---------------------------------------------------------------- mobile
   Measured on a 360px viewport, 2026-08-30. No horizontal overflow existed;
   the real problems were a cropped-artwork box, 24 screens of scrolling on the
   works page with no way to skip, and six tap targets under 44px. */

/* jump nav: 22 works is a long scroll on a phone -- let people skip to a group */
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.jump a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line); color: var(--dim); text-decoration: none;
  font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
.jump a:hover, .jump a:focus { color: var(--ink); border-color: var(--faint); }
.jump a b { color: var(--faint); font-weight: 600; margin-left: 8px; }

/* anchors must clear the sticky bar */
h2[id] { scroll-margin-top: 64px; }

/* inline text links get a real touch area without disturbing the type */
.pillar .count a, .cta a, footer a { display: inline-block; padding: 14px 0; min-height: 44px; box-sizing: content-box; }

@media (max-width: 560px) {
  main { padding: 0 18px 64px; }
  .hero { padding: 32px 0 24px; }
  .hero.small { padding: 28px 0 20px; }
  h1 { font-size: 2.35rem; }
  .tagline { font-size: 1.06rem; }
  h2 { margin: 44px 0 20px; }
  .work .body { padding: 18px; gap: 6px; }
  /* the grid's 300px minimum column overflows a 320px phone -- measured 2026-08-30 */
  .grid { grid-template-columns: 1fr; }
  .show { margin-bottom: 40px; }
  .photos { grid-template-columns: 1fr; }
  /* the pillar grid is one column here, so its 1px gaps read as stacked panels */
  .pillar { padding: 24px 20px; }
}

/* ------------------------------------------------------------------ the board
   A third page for now; intended to become the front page. Full-bleed, so it
   escapes `main`'s max-width and padding. */
#board-stage {
  position: relative;
  /* Full-bleed WITHOUT 100vw: `width:100vw` counts the scrollbar and reintroduces the
     horizontal scroll the mobile pass removed. Negative margins equal to main's own
     padding reach the edges of the padding box and can never overflow. */
  width: auto; margin-left: -24px; margin-right: -24px;
  height: min(78vh, 760px); min-height: 420px;
  background: var(--panel);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  touch-action: none;            /* dragging a card must not scroll the page */
  overflow: hidden;
}
#board-stage canvas { display: block; width: 100%; height: 100%; }
.board-fallback { padding: 32px 24px; color: var(--dim); }

#board-detail {
  position: fixed; right: 20px; bottom: 20px; z-index: 20;
  width: min(340px, calc(100vw - 40px));
  background: var(--bg); border: 1px solid var(--line);
  padding: 22px; box-shadow: 0 18px 50px rgba(0,0,0,.55);
}
#board-detail h3 { margin: 0 0 6px; padding-right: 28px; }
#board-detail p { color: var(--dim); font-size: .95rem; margin: 0 0 10px; }
#board-detail .by {
  font: 500 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 12px;
}
#board-detail .close {
  position: absolute; top: 10px; right: 10px;
  min-width: 44px; min-height: 44px;
  background: none; border: 0; color: var(--faint);
  font-size: 22px; line-height: 1; cursor: pointer;
}
#board-detail .close:hover { color: var(--ink); }
#board-detail .avail { border-top: 1px solid var(--line); padding-top: 12px; }
#board-detail .avail span {
  font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
#board-detail .avail.available span { color: var(--accent); }
#board-detail .avail.sold span, #board-detail .avail.fixture span { color: var(--sold); }

.board-intro { max-width: 46rem; padding: 32px 0 20px; }
.board-intro p { color: var(--dim); }

@media (max-width: 560px) {
  #board-stage { height: 62vh; min-height: 340px; margin-left: -18px; margin-right: -18px; }
  #board-detail { right: 12px; left: 12px; bottom: 12px; width: auto; padding: 18px; }
}
.board-intro h1 { font-size: clamp(2rem, 5vw, 2.9rem); margin-bottom: 14px; }
.board-intro .hint {
  font: 500 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint);
}
.t-red { color: #c0574a; font-weight: 400; }
.t-grey { color: #9c8a75; font-weight: 400; }

/* --- board: vignette, legend, mobile ------------------------------------- */
.board-vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 42%, rgba(0,0,0,.30) 74%, rgba(0,0,0,.62) 100%);
}
.board-legend {
  position: absolute; left: 14px; top: 14px; z-index: 3;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  max-width: calc(100% - 28px);
}
.board-legend .lg {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 0 12px; cursor: pointer;
  background: rgba(13,11,10,.80); border: 1px solid var(--line);
  font: 600 10px/1 var(--sans); letter-spacing: .13em; text-transform: uppercase;
  color: var(--dim); backdrop-filter: blur(4px);
}
.board-legend .lg:hover { color: var(--ink); }
.board-legend input { position: absolute; opacity: 0; width: 0; height: 0; }
.board-legend .sw { width: 16px; height: 3px; background: currentColor; opacity: .35; }
.board-legend input:checked + .sw { opacity: 1; }
.board-legend .lg-figure .sw { color: #c0574a; }
.board-legend .lg-cycle  .sw { color: #c9a227; }
.board-legend .lg-show   .sw { color: #6f8fa8; }
.board-legend .lg-theme  .sw { color: #9c8a75; }
.board-legend #board-reset {
  min-height: 40px; padding: 0 12px; cursor: pointer;
  background: rgba(13,11,10,.80); border: 1px solid var(--line); color: var(--faint);
  font: 600 10px/1 var(--sans); letter-spacing: .13em; text-transform: uppercase;
}
.board-legend #board-reset:hover { color: var(--ink); }

@media (max-width: 560px) {
  /* the board is the point on a phone -- give it height, and keep the legend
     out of the way rather than covering the top-left corner of the wall */
  #board-stage { height: 68vh; min-height: 400px; }
  .board-legend {
    left: 8px; right: 8px; top: auto; bottom: 8px; max-width: none;
    justify-content: center; gap: 4px;
  }
  .board-legend .lg, .board-legend #board-reset {
    min-height: 36px; padding: 0 9px; font-size: 9px; letter-spacing: .1em;
  }
  .board-vignette { background: radial-gradient(ellipse at 50% 42%, rgba(0,0,0,0) 48%, rgba(0,0,0,.5) 100%); }
}

/* =========================================================== the board, full screen
   Not a window onto a wall — the wall. The stage fills the viewport and every piece
   of chrome floats over it. `dvh` so mobile browser bars cannot crop it. */
.board-page { overflow: hidden; }
.board-page main { max-width: none; margin: 0; padding: 0; }
.board-page .bar { background: transparent; border-bottom: 0; backdrop-filter: none; }
.board-page .bar nav {
  /* a pill that hugs its links, rather than a bar that stops arbitrarily mid-screen */
  width: fit-content; margin: 10px 0 0 16px; padding: 0 6px;
  background: rgba(11,9,8,.62); border: 1px solid var(--line);
  backdrop-filter: blur(8px);
}

.board-page #board-stage {
  position: fixed; inset: 0; z-index: 0;
  width: auto; height: 100vh; height: 100dvh;
  min-height: 0; margin: 0; border: 0;
}
.board-page .board-legend { left: 16px; top: auto; bottom: 16px; }
.board-page .board-vignette {
  background: radial-gradient(ellipse at 50% 46%, rgba(0,0,0,0) 46%, rgba(0,0,0,.32) 76%, rgba(0,0,0,.70) 100%);
}

/* the about panel floats top-right, and folds away */
.board-about {
  position: fixed; z-index: 4; right: 16px; top: 74px;
  width: min(360px, calc(100vw - 32px));
  background: rgba(11,9,8,.86); border: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.board-about-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 48px; padding: 0 16px; cursor: pointer;
  background: none; border: 0; color: var(--ink); text-align: left;
  font: 400 1.25rem/1 var(--serif);
}
.board-about-toggle::after {
  content: '−'; color: var(--faint); font: 600 18px/1 var(--sans);
}
.board-about-toggle[aria-expanded="false"]::after { content: '+'; }
.board-about-body { padding: 0 16px 16px; }
.board-about-body p { color: var(--dim); font-size: .92rem; margin: 0 0 10px; }
.board-about-body .hint {
  font: 500 11px/1.5 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); margin: 0;
}
.board-about[data-collapsed="true"] .board-about-body { display: none; }
.t-amber { color: #c9a227; font-weight: 400; }
.t-blue  { color: #6f8fa8; font-weight: 400; }

@media (max-width: 700px) {
  /* on a phone the panel starts folded — the board is the point, not the caption */
  .board-about { right: 10px; left: 10px; top: 64px; width: auto; }
  .board-page .board-legend {
    left: 8px; right: 8px; bottom: 10px; justify-content: center;
  }
}

/* zoom controls and the enlarged paper */
.board-legend #board-in, .board-legend #board-out,
.board-legend #board-all {
  min-width: 40px; min-height: 40px; padding: 0 12px; cursor: pointer;
  background: rgba(13,11,10,.80); border: 1px solid var(--line); color: var(--dim);
  font: 600 13px/1 var(--sans); letter-spacing: .1em;
}
.board-legend #board-all { font-size: 10px; text-transform: uppercase; letter-spacing: .13em; }
.board-legend #board-in:hover, .board-legend #board-out:hover,
.board-legend #board-all:hover { color: var(--ink); }
#board-detail img.paper {
  width: 100%; height: auto; margin: 0 0 12px; border: 1px solid var(--line);
}

/* ===================================================================== the lab
   A workbench for the folder. Deliberately plain: this is not a page of the site. */
.lab-page { overflow: hidden; }
.lab-page main { max-width: none; margin: 0; padding: 0; }
.lab-page .bar nav { width: fit-content; margin: 10px 0 0 16px; padding: 0 6px;
  background: rgba(11,9,8,.62); border: 1px solid var(--line); }
#lab-stage {
  position: fixed; inset: 0 380px 0 0; height: 100vh; height: 100dvh;
  background: #0b0908; touch-action: none;
}
#lab-stage canvas { display: block; width: 100%; height: 100%; }
#lab-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 380px; z-index: 3;
  overflow-y: auto; padding: 20px 18px 40px;
  background: #100e0c; border-left: 1px solid var(--line);
}
#lab-panel h1 { font-size: 1.5rem; margin: 0 0 8px; }
#lab-panel h4 {
  font: 700 10px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin: 20px 0 8px; padding-top: 10px;
  border-top: 1px solid var(--line);
}
.lab-note { color: var(--dim); font-size: .85rem; margin: 0 0 10px; }
.lab-note code { color: var(--ink); font-size: .8rem; }
.lab-count { font: 600 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 14px; }
#lab-panel .row {
  display: grid; grid-template-columns: 116px 1fr 52px; gap: 8px;
  align-items: center; margin-bottom: 6px;
}
#lab-panel label { font: 500 11px/1.3 var(--sans); color: var(--dim); }
#lab-panel output { font: 500 11px/1 var(--sans); color: var(--faint); text-align: right; }
#lab-panel input[type=range] { width: 100%; accent-color: #c9a227; }
#lab-panel input[type=color] { width: 100%; height: 26px; background: none; border: 1px solid var(--line); }
#lab-panel select { background: #17130f; color: var(--ink); border: 1px solid var(--line); padding: 6px; }
#lab-panel .acts { display: flex; gap: 8px; margin-top: 18px; }
#lab-panel .acts button {
  flex: 1; min-height: 40px; cursor: pointer; color: var(--ink);
  background: #1d1813; border: 1px solid var(--line);
  font: 600 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
}
#lab-panel .acts button:hover { border-color: var(--accent); }
#lab-out {
  margin-top: 12px; padding: 10px; background: #070605; border: 1px solid var(--line);
  color: var(--dim); font: 400 11px/1.5 ui-monospace, monospace;
  white-space: pre-wrap; max-height: 240px; overflow: auto;
}
@media (max-width: 900px) {
  #lab-stage { inset: 0 0 46vh 0; height: 54vh; }
  #lab-panel { top: auto; left: 0; width: auto; height: 46vh; border-left: 0; border-top: 1px solid var(--line); }
}

/* ---- landing: the hyperlink bibliography -------------------------------
   Exhibitions with a photograph lead with a plate; every exhibition, with a
   photograph or without, appears in the numbered list below. The grid is
   sized so that ONE plate does not swell to fill the page -- which is what
   happened while only Vossen had a photo, and will happen again whenever the
   archive is thin for a while. */
.lede { color: var(--dim); max-width: 46rem; margin: 0 0 32px; }

.plates {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  margin: 0 0 44px;
  align-items: start;
}
.plate { margin: 0; }
.plate a { text-decoration: none; display: block; }
.plate img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--line);
  filter: saturate(.92);
  transition: filter .2s ease, border-color .2s ease;
}
.plate a:hover img { filter: saturate(1); border-color: var(--accent); }
.plate figcaption {
  font: 400 13px/1.5 var(--sans);
  color: var(--dim);
  margin-top: 10px;
  border-bottom: 1px solid transparent;
}
.plate a:hover figcaption { color: var(--ink); }

.bibliography {
  margin: 0;
  padding-left: 1.6em;
  max-width: 46rem;
  color: var(--dim);
  font-size: 15px;
}
.bibliography li { margin: 0 0 2px; }
.bibliography a {
  color: var(--dim);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  display: inline-block;
  padding: 9px 0;
  min-height: 0;
}
.bibliography a:hover { color: var(--ink); border-bottom-color: var(--accent); }

/* the exhibitions page proper */
.shows .show, .shows .show.compact { max-width: 46rem; }
.shows .show:target h3, .shows .show.compact:target h3 { color: var(--accent); }

/* privacy: text only, white on black, one readable column */
body.privacy-page { background: #000; color: #fff; }
body.privacy-page .bar { background: #000; }
body.privacy-page a { color: #fff; }
.privacy { max-width: 680px; margin: 48px auto 0; }
.privacy h1 { font-size: 2rem; margin: 0 0 8px; }
.privacy h2 { font-size: 1.2rem; margin: 40px 0 8px; }
.privacy .lede { font-size: 1.1rem; margin: 0; }
.privacy .updated { color: #bbb; font: 13px/1.4 var(--sans); margin: 8px 0 0; }
.privacy p { margin: 0 0 14px; }
body.privacy-page .privacy h1,
body.privacy-page .privacy h2,
body.privacy-page .privacy .lede { color: #fff; }
body.privacy-page .privacy h2 { border-color: #333; }
/* privacy as questions: only the questions show until one is opened */
.privacy details { border-bottom: 1px solid #333; }
.privacy details:first-of-type { border-top: 1px solid #333; margin-top: 32px; }
.privacy summary { cursor: pointer; list-style: none; padding: 18px 32px 18px 0; position: relative; }
.privacy summary::-webkit-details-marker { display: none; }
.privacy summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 22px/1 var(--sans); color: #fff; }
.privacy details[open] summary::after { content: "\2212"; }
.privacy summary h2 { display: inline; margin: 0; padding: 0; border: 0; font: 1.15rem/1.4 var(--serif); letter-spacing: 0; text-transform: none; color: #fff; }
.privacy summary:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.privacy .answer { padding: 0 0 12px; }