:root{
  --blue:#2B4FD8; --red:#E2352A; --yellow:#F5C518; --green:#3EA33E;
  --orange:#F2801F; --pink:#F58BB4; --purple:#7B4BA8; --teal:#2FA8A0;
  --ink:#14131A; --mid:#5C5967; --faint:#6E6B79; --hair:#E7E4EC; --rule:#B9B6C2;
  --paper:#FBFAF7;
  /* The rail rests proportional to the viewport and steps forward while a
     painting is selected: prominence follows attention. Laptops keep 392px. */
  --rail:clamp(392px,26vw,620px);
  --railWide:clamp(560px,34vw,880px);
  --sans:"Helvetica Neue",Helvetica,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --serif:"Spectral Epigraph",Georgia,"Times New Roman",serif;
  /* The eight catalogue colours in one band. This is the only place they all
     appear together, so it reads as the painter's mark rather than decoration. */
  --paint:linear-gradient(90deg,
    var(--blue) 0 12.5%,var(--red) 0 25%,var(--yellow) 0 37.5%,var(--green) 0 50%,
    var(--orange) 0 62.5%,var(--pink) 0 75%,var(--purple) 0 87.5%,var(--teal) 0 100%);
}
/* Subset of Spectral Italic covering only the epigraph alphabet, embedded so the
   artist's line paints with the first frame: no extra request, no reflow. */
@font-face{
  font-family:"Spectral Epigraph";font-style:italic;font-weight:400;font-display:block;
  src:url(data:font/woff2;base64,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) format("woff2");
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-weight:300; -webkit-font-smoothing:antialiased; overflow:hidden;
  font-size:15px; line-height:1.5;
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
::selection{background:var(--yellow)}

/* ---------- shell ---------- */
#app{display:flex;flex-direction:column;height:100%}
header{
  display:flex;align-items:baseline;gap:26px;padding:20px 26px 16px;
  flex:0 0 auto;position:relative;z-index:30;background:var(--paper);
}
/* The painted rule replaces the grey hairline the header used to sit on. It is
   what the nav underlines below continue, so navigation and chrome read as one
   system instead of a title bar with buttons parked in it. */
header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--paint)}
.brand{display:flex;flex-direction:column;gap:12px;min-width:0}
/* margin:0 matters more at 30px than it did at 19px: the user-agent h1 margin
   is .67em, which was quietly costing the map 40px of height. */
.wordmark{margin:0;font-size:30px;letter-spacing:-.02em;white-space:nowrap;font-weight:400;line-height:1.05}
.siteIntro{
  /* One line on a wide screen: it fills the gap under the nav instead of
     stacking under the epigraph and pushing the map down. It wraps on its own
     once the viewport can no longer hold it. */
  margin:0;max-width:none;color:var(--mid);font-size:12.5px;line-height:1.5;
  letter-spacing:-.005em;
}
.siteIntro span{color:var(--ink)}
.wordmark>a{display:block}
.wordmark b{font-weight:400}
.wordmark .a{color:var(--blue)} .wordmark .b{color:var(--red)}
.wordmark .c{color:var(--yellow)} .wordmark .d{color:var(--green)}
.wordmark .e{color:var(--orange)} .wordmark .f{color:var(--purple)}
.wordmark .g{color:var(--pink)} .wordmark .h{color:var(--teal)}
.wordmark small{
  /* .wordmark sets nowrap for the name; the epigraph is a sentence and must
     be free to wrap, or a longer line pushes the sticky header sideways. */
  display:block;white-space:normal;margin-top:7px;color:var(--ink);font-size:16px;line-height:1.35;
  font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:0;text-transform:none;
}
.wordmark small q{quotes:none}
.wordmark small q::before,.wordmark small q::after{
  font-weight:400;font-size:1.05em;
}
.wordmark small q::before{content:"“";color:var(--blue);margin-right:.04em}
.wordmark small q::after{content:"”";color:var(--pink);margin-left:.02em}
.wordmark b span{display:inline-block}
/* Offsets in em so the hand-set tilt keeps its proportion now the wordmark
   is 30px; the original pixel values were measured against 19px. */
.wordmark b span:nth-child(2n){transform:rotate(3deg) translateY(.026em)}
.wordmark b span:nth-child(2n+1){transform:rotate(-3.2deg) translateY(-.021em)}
.wordmark b span:nth-child(3n){transform:rotate(1.4deg) translateY(.037em)}

.navs{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
nav{display:flex;gap:26px;align-items:baseline}
/* The artist's own pages, quieter than the collection sections: smaller, ink
   underline when current, the same painted stroke idiom otherwise. */
#artistNav{gap:18px}
#artistNav a{font-size:12px;color:var(--faint);padding:2px 1px 6px;--tab:var(--ink)}
#artistNav a::after{height:2px}
.brand{position:relative}
.smiley{position:absolute;left:100%;top:-8px;margin-left:14px;width:46px;height:auto;opacity:0;
  transform:scale(.6) rotate(-8deg);transform-origin:left bottom;pointer-events:none;
  transition:opacity .22s ease,transform .32s cubic-bezier(.3,1.4,.5,1)}
.smiley.show{opacity:1;transform:none}
.pressList{list-style:none;margin:0;padding:0;max-width:640px}
.pressList li{border-bottom:1px solid var(--hair)}
.pressList a{display:grid;grid-template-columns:150px 1fr auto;gap:6px 18px;align-items:baseline;padding:13px 4px;transition:background .16s}
.pressList a:hover{background:#FFFDF2}
.pOutlet{font-size:15px;color:var(--ink)}
.pTitle{font-size:13.5px;color:var(--mid);line-height:1.4}
.pYear{font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.contactList a{grid-template-columns:110px 1fr}
.bioHead{display:flex;align-items:center;gap:26px}
.bioHead .bioPortrait{width:96px;height:auto;flex:0 0 auto}
.bioText h2{margin:0 0 6px}
.bioLine{margin:0;color:var(--mid);font-size:15px;line-height:1.5}
.legalPage{max-width:640px;color:var(--mid);font-size:15px;line-height:1.62}
.legalPage h3{margin:26px 0 6px;font-size:15px;font-weight:600;color:var(--ink)}
.legalPage p{margin:0 0 10px}
.legalPage address{font-style:normal;color:var(--ink);margin:0 0 16px}
.legalStamp{margin-top:22px;font-size:12px;color:var(--faint)}
.shownNote{margin:0 0 12px;color:var(--mid);font-size:13.5px;max-width:56ch}
.shownList{list-style:none;margin:0;padding:0;max-width:640px;columns:2;column-gap:36px;font-size:14px}
.shownList li{padding:6px 0;border-bottom:1px solid var(--hair);break-inside:avoid}
/* Quiet ink links rather than uppercase pills. Each section owns one catalogue
   colour and the active one is underlined in it, so the current section is read
   from a painted stroke that matches the rule beneath, not from an inverted chip. */
nav a{
  position:relative;padding:4px 1px 8px;font-size:13.5px;letter-spacing:0;
  text-transform:none;color:var(--mid);transition:color .16s;white-space:nowrap;
}
nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px;
  background:var(--tab);opacity:0;transform:scaleX(.55);transform-origin:left;
  transition:opacity .18s ease,transform .18s ease;
}
nav a:hover{color:var(--ink)}
nav a:hover::after{opacity:.34;transform:scaleX(1)}
nav a[aria-current=page]{color:var(--ink)}
nav a[aria-current=page]::after{opacity:1;transform:scaleX(1)}
#tab-map{--tab:var(--blue)} #tab-people{--tab:var(--red)}
#tab-trips{--tab:var(--green)} #tab-diary{--tab:#D66E0D}

/* ---------- body split ---------- */
#split{flex:1;display:flex;min-height:0;position:relative}
#mapColumn{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}
/* Map markers raise themselves to z-index 1000 to sit above one another.
   Without a stacking context here they also clear the header, and a hovered
   marker punches through the painted rule on sticky compact widths. */
#stage{flex:1;position:relative;min-width:0;min-height:0;overflow:hidden;isolation:isolate}
/* The stage hand-off snaps: animating this width re-laid-out the page every
   frame and its easing tail crawled for most of a second. The railPad's own
   150ms fade is the only motion, and the map resizes exactly once. */
#rail{
  width:var(--rail);flex:0 0 var(--rail);border-left:1px solid var(--hair);
  overflow-y:auto;overflow-x:hidden;background:#fff;position:relative;
  overscroll-behavior:contain;
}
/* Desktop only: below the stacking breakpoint the rail is already full-width,
   and this two-id selector would out-specify the media query's width:100%. */
@media (min-width:900.02px){
  #split.workOpen #rail{width:var(--railWide);flex-basis:var(--railWide)}
}

/* ---------- map ---------- */
#field,#dots{position:absolute;inset:0;width:100%;height:100%}
#globeMap{
  position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;
  background:#F6F4EE;
  transition:opacity .42s ease;
}
#stage.globeReady #globeMap{opacity:1;pointer-events:auto}
#stage.mapLoading #globeMap,#stage.mapFallback #globeMap{visibility:hidden}
#stage.globeReady #field,#stage.globeReady #labels,#stage.globeReady #dots{visibility:hidden;pointer-events:none}
#stage.mapLoading #field,#stage.mapLoading #labels,#stage.mapLoading #dots{visibility:hidden;pointer-events:none}
#stage.mapLoading .mapctl{visibility:hidden;pointer-events:none}
#stage.globeReady .mapctl{display:none!important}
#stage:not(.mapView) #globeMap,#stage:not(.mapView) #field,#stage:not(.mapView) #labels,
#stage:not(.mapView) #dots,#stage:not(.mapView) #mapLoader,#stage:not(.mapView) #mapStatus,
#stage:not(.mapView) #mapHome,#stage:not(.mapView) #mapEmpty,
#stage:not(.mapView) #mapctl{display:none!important}
#mapStatus{
  display:none;position:absolute;z-index:7;left:20px;top:18px;padding:8px 12px;border:1px solid var(--hair);
  border-radius:100px;background:rgba(251,250,247,.9);color:var(--mid);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;pointer-events:none;
}
#stage.mapFallback.mapView #mapStatus{display:block}
#mapLoader{
  position:absolute;inset:0;z-index:9;display:grid;place-items:center;
  background:var(--paper);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .42s ease,visibility .42s ease;
}
#stage.mapView.mapLoading #mapLoader{opacity:1;visibility:visible;pointer-events:auto;cursor:progress}
.loadingMark{text-align:center;transform:translateY(-5px)}
.loadingName{
  display:flex;align-items:baseline;justify-content:center;font-size:clamp(30px,4vw,42px);
  line-height:1;letter-spacing:-.04em;font-weight:400;white-space:nowrap;
}
.loadingName span{
  display:inline-block;color:var(--letter);opacity:.55;
  transform:translateY(0) rotate(var(--tilt));
  animation:loadingLetter 1.45s cubic-bezier(.45,0,.35,1) infinite;
  animation-delay:calc(var(--step) * 72ms);
}
.loadingName .loadingGap{width:.3em;animation:none;color:transparent;transform:none}
.loadingMark small{
  display:block;margin-top:12px;color:var(--faint);font-size:10px;font-weight:400;
  letter-spacing:.15em;text-transform:uppercase;
}
@keyframes loadingLetter{
  0%,100%{opacity:.55;transform:translateY(0) rotate(var(--tilt))}
  42%{opacity:1;transform:translateY(-5px) rotate(0deg)}
  68%{opacity:.78;transform:translateY(1px) rotate(var(--tilt))}
}
@media (prefers-reduced-motion:reduce){
  #globeMap,#mapLoader{transition:none}
  .loadingName span{animation:none;opacity:1}
  .mapHome,.mapMarker{transition:none!important}
  nav a,nav a::after{transition:none}
  .smiley{transition:none}
  #lightbox,#lightbox figure{transition:none}
  #lightbox figure{transform:none}
}
.mapHome{
  display:none;position:absolute;z-index:7;left:18px;top:18px;padding:8px 12px;
  border:1px solid var(--hair);border-radius:100px;background:rgba(251,250,247,.92);
  color:var(--mid);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  box-shadow:0 1px 8px rgba(20,19,26,.08);opacity:0;visibility:hidden;
  transform:translateY(-5px);pointer-events:none;transition:opacity .24s ease,transform .24s ease,visibility .24s;
}
#stage.globeReady .mapHome{display:block}
.mapHome.active{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.mapHome:hover,.mapHome:focus-visible{border-color:var(--ink);color:var(--ink);background:#fff}
#mapEmpty{
  position:absolute;z-index:7;left:50%;top:50%;transform:translate(-50%,-50%);
  max-width:290px;padding:15px 18px;background:rgba(251,250,247,.94);border:1px solid var(--hair);
  border-radius:6px;text-align:center;color:var(--mid);font-size:13px;display:none;
}
#mapEmpty .chip{margin-top:9px}
#mapEmpty b{display:block;color:var(--ink);font-weight:400;margin-bottom:3px}
#dots{cursor:grab;touch-action:none}
#dots .cl:focus-visible{outline:none}
#dots .cl:focus-visible circle:nth-of-type(2){stroke:#14131A;stroke-width:2}
#dots .cl:hover circle:nth-of-type(2){stroke:#14131A;stroke-width:1.2}
/* Ink, not blue: blue is the Map tab's own underline colour, and a blue ring
   two pixels away from it made focus and section identity indistinguishable. */
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* Selection moves focus to these headings for screen readers; the visual
   ring boxed the painting title in ink on every arrow-key step. */
.railPad h2:focus,#sheet h2:focus{outline:none}
#lightbox :focus-visible{outline-color:var(--paper)}
.srOnly{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
#dots.drag{cursor:grabbing}
.regionLabel{
  position:absolute;font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--rule);pointer-events:none;transform:translate(-50%,-50%);white-space:nowrap;
  font-weight:400;
}
.mapctl{position:absolute;left:20px;bottom:20px;display:flex;gap:7px;z-index:6}
.mapctl button{
  width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--hair);
  font-size:15px;color:var(--mid);display:grid;place-items:center;transition:.16s;
}
.mapctl button:hover{border-color:var(--ink);color:var(--ink)}
.mapMarker{
  width:var(--size);height:var(--size);min-width:18px;min-height:18px;border-radius:50%;
  display:grid;place-items:center;background:var(--marker);color:#fff;border:1px solid rgba(255,255,255,.86);
  box-shadow:0 1px 0 rgba(20,19,26,.2),0 3px 12px rgba(20,19,26,.16);
  font-size:10px;font-weight:500;line-height:1;transition:opacity .16s,filter .16s,box-shadow .16s;
}
.mapMarker:hover,.mapMarker:focus-visible{z-index:1000!important;filter:saturate(1.15);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ink),0 5px 18px rgba(20,19,26,.2)}
.mapMarker.selected{z-index:1001!important;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ink),0 5px 18px rgba(20,19,26,.2)}
.mapMarker.dim{opacity:.2}
.maplibregl-map{font-family:var(--sans)}
.maplibregl-ctrl-group{border-radius:100px;overflow:hidden;box-shadow:0 1px 8px rgba(20,19,26,.13)}
.maplibregl-ctrl-group button{width:38px;height:38px;background-color:#fff}
.maplibregl-ctrl-attrib{font-size:10px!important;background:rgba(251,250,247,.82)!important}
.maplibregl-popup-content{
  padding:8px 11px!important;border:1px solid var(--hair);border-radius:3px!important;
  box-shadow:0 4px 18px rgba(20,19,26,.12)!important;font-size:12px;color:var(--ink);
}
.maplibregl-popup-tip{display:none}

/* ---------- people / trips grids ---------- */
.sheet{position:absolute;inset:0;overflow-y:auto;padding:34px 40px 90px}
.sheetHead{max-width:660px;margin:0 0 30px}
.sheetHead h2{font-size:26px;font-weight:300;letter-spacing:-.02em;margin:0 0 9px}
.sheetHead p{margin:0;color:var(--mid);font-size:14px;max-width:56ch}

.cloud{display:flex;flex-wrap:wrap;gap:5px 12px;align-items:baseline;max-width:1000px}
.cloud a{
  line-height:1.15;letter-spacing:-.02em;transition:.16s;padding:2px 4px;border-radius:5px;
  font-weight:300;
}
.cloud a:hover{background:var(--yellow)}
.cloud a.on{background:var(--ink);color:var(--paper)}
.cloud a i{font-style:normal;font-size:.52em;color:var(--faint);vertical-align:super;margin-left:3px;letter-spacing:0}
.cloud a:hover i,.cloud a.on i{color:inherit;opacity:.65}

.trips{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:0;background:transparent;border-top:1px solid var(--hair);border-left:1px solid var(--hair);max-width:1180px}
.trip{background:#fff;padding:19px 20px 17px;text-align:left;transition:.16s;display:block;width:100%;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.trip:hover{background:#FFFDF2}
.trip .yr{font-size:10.5px;letter-spacing:.15em;color:var(--faint);text-transform:uppercase}
.trip h3{margin:6px 0 3px;font-size:17px;font-weight:400;letter-spacing:-.015em}
.trip .cast{font-size:13px;color:var(--mid);margin:0 0 12px}
.trip .strip{display:flex;gap:3px;height:52px}
.trip .strip span{flex:1;background:var(--hair);border-radius:2px;background-size:cover;background-position:center}
.trip .n{font-size:12px;color:var(--mid);margin-top:11px;letter-spacing:.02em}

/* ---------- rail content ---------- */
.railPad{padding:26px 26px 60px}
.kicker{font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--faint);margin:0 0 10px;font-weight:400}
.railPad h2{font-size:23px;font-weight:300;letter-spacing:-.022em;margin:0 0 6px;line-height:1.2}
#split.workOpen .railPad h2{font-size:28px}
.railPad .sub{color:var(--mid);font-size:13.5px;margin:0 0 22px}
.hr{height:1px;background:var(--hair);margin:22px 0}

.wlist{display:flex;flex-direction:column;gap:2px}
.w{display:flex;gap:14px;padding:9px;border-radius:8px;text-align:left;width:100%;transition:background .16s,box-shadow .16s;align-items:flex-start}
.w:hover{background:#FAF9F5}
.w.on{
  margin:0 -7px;padding:9px 16px;
  background:rgba(43,79,216,.055);
  box-shadow:inset 0 0 0 1px rgba(43,79,216,.2);
}
.w.on .wt{color:var(--ink)} .w.on .wm{color:var(--mid)}
.thumb{
  width:58px;flex:0 0 58px;height:58px;border-radius:4px;background:var(--hair);
  background-size:cover;background-position:center;position:relative;overflow:hidden;
}
.thumb.none{display:grid;place-items:center}
.thumb.none::after{content:"";width:13px;height:13px;border-radius:50%;background:var(--c,var(--rule));opacity:.85}
.wt{font-size:14px;line-height:1.32;letter-spacing:-.01em;margin:1px 0 3px}
.wm{font-size:11.5px;color:var(--mid);letter-spacing:.02em}

/* work detail: the plate. One fixed composition for every painting, so
   walking Previous/Next never reshuffles the page. On wide screens the
   label hangs beside the canvas, in the space a portrait would leave. */
.plateHead{margin:0 0 12px}
.plateHead h2{margin:6px 0 0}
/* The picture takes the whole width and centres inside its row, so a portrait
   canvas hangs in the middle the way it would on a wall while a landscape one
   simply fills the space. No aspect ratio has to be known to do this. */
.plateImg{display:flex;align-items:center;justify-content:center;margin:0 0 8px}
.plateImg .big{margin:0}
.zoomBtn{
  display:flex;align-items:center;justify-content:center;
  max-width:100%;max-height:100%;min-width:0;cursor:zoom-in;
}
.zoomBtn:focus-visible{outline-offset:3px;border-radius:6px}
.finePrint{margin-top:14px;padding-top:10px;border-top:1px solid var(--hair)}
@media (min-width:900.02px){
  .plateImg{height:clamp(320px,46vh,430px);margin:0 0 10px}
  /* The control has to carry the row's height itself, or the percentage cap on
     the image below resolves against the control and the picture falls back to
     full width, overflowing the row instead of hanging centred inside it. */
  .plateImg .zoomBtn{height:100%;max-width:100%}
  .plateImg .big{max-width:100%;max-height:100%;width:auto;height:auto}
  .plateImg .bigNone{height:100%;width:auto;aspect-ratio:4/5;max-width:100%;margin:0}
  .plateHead h2{font-size:20px}
  #split.workOpen .railPad .plateHead h2{font-size:22px}
}
.big{width:100%;height:auto;border-radius:5px;background:var(--hair);display:block;margin:0 0 18px}
.bigNone{
  width:100%;aspect-ratio:4/5;border-radius:5px;margin:0 0 18px;display:grid;place-items:center;
  text-align:center;padding:30px;background:#F6F4F0;background:
    linear-gradient(135deg,color-mix(in srgb,var(--c) 16%,#fff),color-mix(in srgb,var(--c) 5%,#fff));
  border:1px solid var(--hair);
}
.bigNone span{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--mid);max-width:22ch;line-height:1.8}
dl{margin:0;font-size:13px}
dl div{display:flex;gap:12px;padding:7px 0;border-bottom:1px solid var(--hair)}
/* The last row closes the list. Without this its underline stacks against
   the rule of whatever follows and draws two lines a few pixels apart. */
dl div:last-child{border-bottom:0}
dl dt{flex:0 0 84px;color:var(--faint);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding-top:2px}
dl dd{margin:0;flex:1}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{
  font-size:12px;padding:3px 10px;border-radius:100px;border:1px solid var(--hair);
  transition:.14s;letter-spacing:.01em;
}
.chip:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
/* A catalogue note, not an alert. This was a yellow warning panel, which gave a
   routine documentation gap the visual weight of an error. */
.flag{margin:14px 0 0;color:var(--mid);font-size:12px;line-height:1.5}
.empty{color:var(--faint);font-size:13.5px;padding:8px 0}

/* diary */
.dy{max-width:800px;margin:0 0 40px}
.dy h3{font-size:36px;font-weight:300;color:var(--rule);margin:0 0 8px;letter-spacing:-.02em}
.dlist{border-top:1px solid var(--hair)}
.dEnt{display:block;width:100%;text-align:left;padding:11px 8px;border-bottom:1px solid var(--hair);transition:background .16s,box-shadow .16s;position:relative}
.dEnt:hover{background:#FFFDF2}
.dEnt .dt{font-size:16px;letter-spacing:-.012em;display:block;line-height:1.35}
.dEnt .dm{font-size:12px;color:var(--mid);display:block;margin-top:2px}
/* Selection tints the row with the painting's own colour and lifts it out of
   the list, rather than inverting to a full-bleed black bar. A "you are here"
   marker should not be the heaviest element on the page, square-cornered
   full-bleed fill reads as a raw table cell, and inverted body copy is harder
   to read at this size. The colour also ties the row to its artwork. */
.dEnt.on{
  /* The card sits clear of its neighbours and extends past the text column on
     both sides, so the selection reads as an object rather than a filled row.
     One accent, one meaning: this is the painting you are looking at. The old
     tint borrowed each work's palette colour, which is only its array index. */
  margin:7px -18px;padding:18px 26px;
  background:rgba(43,79,216,.055);
  border-bottom-color:transparent;border-radius:11px;
  box-shadow:inset 0 0 0 1px rgba(43,79,216,.2);
}
.dEnt.on .dt{color:var(--ink)} .dEnt.on .dm{color:var(--mid)}

/* ---------- footer ---------- */
/* Furniture, deliberately: the header carries the site's one painted signature,
   so the footer closes on a hairline and stays out of the paintings' way. */
footer{
  flex:0 0 auto;height:46px;padding:0 26px;border-top:1px solid var(--hair);
  display:flex;gap:30px;align-items:center;font-size:11.5px;color:var(--faint);
  letter-spacing:.055em;background:var(--paper);
}
footer b{color:var(--ink);font-weight:400}
footer .sp{margin-left:auto;display:flex;gap:18px;align-items:center}
footer .sp a,footer .sp button{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--faint)}
#legalLinks{display:flex;gap:14px}
footer .sp a:hover,footer .sp button:hover{color:var(--ink);text-decoration-color:var(--ink)}
/* The year filter as text, active year underlined in ink: the same idiom the
   nav already taught, in place of a bar chart whose heights nobody explained. */
.years{display:flex;gap:2px;align-items:center}
.years button{
  padding:8px 7px;background:none;border-radius:0;position:relative;color:var(--faint);
  font-size:11.5px;letter-spacing:.02em;font-variant-numeric:tabular-nums;transition:color .14s;
}
.years button::after{content:"";position:absolute;left:7px;right:7px;bottom:3px;height:2px;
  border-radius:1px;background:var(--ink);opacity:0;transition:opacity .14s}
.years button:hover{color:var(--ink)}
.years button.on{color:var(--ink)}
.years button.on::after{opacity:1}
.geoNote{display:block;color:var(--mid);font-size:12px;margin-top:5px}
.imageNote{display:block;color:var(--mid);font-size:11.5px;margin:-10px 0 18px;line-height:1.45}
.imageNote a{color:inherit;text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
.imageNote a:hover{color:var(--ink);text-decoration-color:var(--ink)}
.detailTools{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:0 0 4px;font-size:11.5px;color:var(--mid)}
.detailTools a,.detailTools button{text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
.detailTools a:hover,.detailTools button:hover{color:var(--ink);text-decoration-color:var(--ink)}
.copyStatus{min-height:1em;color:var(--green);font-size:11px}
.detailTools .copyStatus:empty{display:none}
.placeLink{display:inline-block;margin:-7px 0 18px;color:var(--mid);font-size:12px;text-decoration:underline;text-underline-offset:3px}
.backLink{display:inline-block;margin:0 0 14px;color:var(--mid);font-size:12px;text-decoration:underline;text-underline-offset:3px}
.backLink:hover,.backLink:focus-visible{color:var(--ink)}
/* Walking the wall: previous and next within whatever list the painting was
   opened from. Padded hit areas so thumbs can use them on the stacked layout. */
.pnRow{display:flex;align-items:center;gap:4px;margin:-4px -8px 12px}
.pn{padding:8px;color:var(--mid);font-size:12px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule)}
a.pn:hover,a.pn:focus-visible{color:var(--ink);text-decoration-color:var(--ink)}
span.pn{opacity:.35;text-decoration:none}
.pnPos{margin-left:auto;padding:8px 8px 8px 0;color:var(--faint);font-size:11px;font-variant-numeric:tabular-nums;text-align:right}


/* ---------- image lightbox ---------- */
/* The overlay stays in the layout and fades, rather than switching display,
   so opening a painting eases in instead of snapping. */
#lightbox{
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  background:rgba(20,19,26,.94);padding:30px;cursor:zoom-out;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s ease,visibility 0s linear .28s;
}
#lightbox.on{
  opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .28s ease,visibility 0s linear 0s;
}
#lightbox figure{
  margin:0;display:grid;justify-items:center;gap:10px;max-width:100%;
  transform:scale(.96) translateY(8px);
  transition:transform .32s cubic-bezier(.2,.7,.3,1);
}
#lightbox.on figure{transform:none}
/* The width cap must clear the overlay padding on BOTH sides, or the image
   hangs past the viewport on narrow screens instead of centring. */
#lightbox img{max-width:min(1400px,calc(100vw - 60px));max-height:84vh;object-fit:contain;border-radius:3px;background:#fff;box-shadow:0 18px 60px rgba(0,0,0,.5);cursor:zoom-out}
#lightbox figcaption{color:rgba(251,250,247,.78);font-size:12.5px;letter-spacing:.02em;text-align:center;cursor:default}
#lightbox .x{position:absolute;top:14px;right:22px;font-size:30px;line-height:1;padding:6px;color:rgba(251,250,247,.85);cursor:pointer}
#lightbox .x:hover,#lightbox .x:focus-visible{color:#fff}
body.lightboxOpen{overflow:hidden}

/* keyboard skip control: invisible until focused, then joins the intro line */
.skipBtn{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skipBtn:focus-visible{position:static;width:auto;height:auto;clip:auto;white-space:normal;margin-left:14px;font-size:12px;color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  body{overflow:auto}
  #app{height:auto;min-height:100%}
  header{flex-wrap:wrap;gap:14px;padding:calc(16px + env(safe-area-inset-top)) 18px 12px;position:sticky;top:0}
  .navs{margin-left:0;width:100%;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 22px}
  nav{gap:20px;overflow-x:auto;padding-bottom:3px}
  #artistNav{gap:16px}
  .smiley{display:none}
  nav a{padding:4px 1px 7px;font-size:12.5px}
  .wordmark{font-size:25px}
  .bioHead{flex-direction:column;align-items:flex-start;gap:12px}
  .shownList{columns:1}
  .pressList a{grid-template-columns:1fr;gap:2px}
  .wordmark small{font-size:14px;margin-top:5px}
  #split{flex-direction:column}
  #mapColumn{flex:0 0 auto;width:100%}
  .siteIntro{font-size:11.5px;max-width:none}
  #stage{height:64vh;flex:0 0 64vh}
  #stage.mapView{height:min(64vh,82vw);flex-basis:min(64vh,82vw)}
  #rail{width:100%;flex:1 1 auto;border-left:0;border-top:1px solid var(--hair);overflow:visible}
  .pn{padding:13px 10px;font-size:13px}
  .pnPos{padding:13px 4px 13px 0;font-size:12px}
  .sheet{padding:24px 18px 70px}
  footer{height:auto;flex-wrap:wrap;gap:4px 16px;padding:6px calc(18px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left))}
  .years{width:100%;overflow-x:auto;order:-1;padding-top:2px}
  .years button{padding:13px 9px;font-size:12.5px;flex:0 0 auto}
  footer .sp{margin-left:auto}
  #lightbox{padding:14px}
  #lightbox img{max-width:calc(100vw - 28px);max-height:78vh}
  #lightbox .x{top:calc(8px + env(safe-area-inset-top));right:14px}
}