/* ============================================================
   DRUSCH DESIGN
   One typeface. One scale. Every value below comes from a token
   written by the editor, so the whole system is adjustable
   without touching this file.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font),system-ui,sans-serif;
  font-size:var(--t-base);line-height:var(--lh);
  font-weight:var(--w-reg);letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--paper);
  padding:12px 18px;font-size:var(--t-meta);letter-spacing:var(--ls)}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:1px solid currentColor;outline-offset:3px}

/* ---------- one typographic voice ---------- */
.lab,.nav a,.card-nm,.card-ty,.head h1,.head h2,.crumb,.dl dt,.spec .sub,.inq,.ex .yr,.ex .vn{
  font-size:var(--t-meta);letter-spacing:var(--ls);
  text-transform:var(--caps);font-weight:var(--w-med)}
body{opacity:1}
.lab,.card-ty,.dl dt,.spec .sub{opacity:var(--text-op)}
.lab{color:var(--ink2);font-weight:var(--w-reg)}
.lab-ink{color:var(--ink)}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:100;display:flex;align-items:baseline;
  gap:clamp(20px,4vw,54px);padding:var(--nav-top) var(--nav-side) var(--head-pad-b);
  background:var(--paper)}
.top.logo-center{justify-content:center;text-align:center}
.top.logo-center .nav{justify-content:center}
.top.logo-right{flex-direction:row-reverse}
.top.logo-right .contact{margin-left:0;margin-right:auto}
.nav.al-center{justify-content:center;flex:1}
.nav.al-right{justify-content:flex-end;flex:1}
.mark{display:block;flex:none;line-height:0}
.mark svg{width:var(--logo-w);height:auto;display:block;fill:currentColor;opacity:var(--logo-op)}
.nav{display:flex;flex-wrap:wrap;gap:0 var(--nav-gap);align-items:baseline}
.nav a{color:var(--ink2);position:relative;padding-bottom:2px;font-weight:var(--w-nav);
  transition:color .45s var(--ease),opacity .45s var(--ease)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease-out)}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.nav a[aria-current]::after,.nav a:hover::after{transform:scaleX(1)}
.top .contact{margin-left:auto;display:flex;gap:0 var(--nav-gap)}
@media (max-width:860px){.top .contact{display:none}}

/* ---------- page shell ---------- */
.wrap{padding:0 var(--page-margin) 0;max-width:1780px;margin:0 auto}
main{padding-top:6px}
.head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:0 0 12px;border-bottom:1px solid var(--line);margin:0 0 22px}
.head h1,.head h2,.crumb{margin:0}

/* ============================================================
   HOMEPAGE. The photograph is the page: 100% of the viewport,
   edge to edge, with the navigation sitting directly on it.
   ============================================================ */
body.home{background:#000}
body.home .top{position:fixed;top:0;left:0;right:0;background:none;
  color:var(--home-ink);transition:opacity .6s var(--ease)}
/* a whisper of a veil so the type always reads, whatever the photograph does */
body.home .top::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:linear-gradient(to bottom,rgba(239,237,231,var(--home-scrim,0)) 0%,rgba(239,237,231,0) 100%)}
body.home .top .nav a{color:inherit;opacity:.72}
body.home .top .nav a:hover,body.home .top .nav a[aria-current]{opacity:1;color:inherit}
body.home .wrap{padding:0;max-width:none}

.stage{position:fixed;inset:0;z-index:0;background:var(--paper);overflow:hidden}
body.home.struct-margins .stage{inset:var(--home-mt) var(--home-ms) var(--home-mb)}
body.home.struct-centered .stage{inset:var(--home-mt) auto var(--home-mb);left:50%;
  transform:translateX(-50%);width:min(100vw,calc(var(--home-h) * 1.6))}
body.home.struct-height .stage{height:var(--home-h);inset:var(--home-mt) 0 auto 0}
.stage .slide{position:absolute;inset:0;opacity:0;
  transition:opacity var(--fade) var(--ease),filter var(--blur-ms) var(--ease),
             transform var(--fade) var(--ease)}
.stage .slide.on{opacity:1}
.stage .slide img{width:100%;height:100%;object-fit:var(--home-fit);
  object-position:var(--home-pos);display:block;
  transform:scale(var(--home-scale,1));opacity:var(--home-op,1);
  filter:brightness(var(--home-bright,1)) contrast(var(--home-contrast,1))}
.stage .scrim{position:absolute;inset:0;pointer-events:none;
  background:rgba(12,12,14,var(--overlay,0))}
/* The homepage never blurs. Hovering the navigation, the captions or the
   photograph leaves the image completely sharp. Blur belongs only to the
   Collection and the individual pieces. */

.home-cap [data-cap]{display:flex;gap:0 14px;align-items:baseline}
.home-cap [data-cap][hidden]{display:none}   /* only the current slide's caption */
.home-cap{position:fixed;left:var(--nav-side);bottom:calc(var(--nav-top) + 4px);
  z-index:100;color:var(--home-ink);display:flex;gap:0 14px;flex-wrap:wrap;
  opacity:.82;transition:opacity .5s var(--ease)}
.home-cap:hover{opacity:1}
.home-cap .lab{color:inherit}
.home-info{position:fixed;right:var(--nav-side);bottom:calc(var(--nav-top) + 26px);
  z-index:100;color:var(--home-ink);display:flex;flex-direction:column;align-items:flex-end;
  gap:3px;text-align:right}
.home-info .row-a,.home-info .row-b{display:flex;gap:0 14px;flex-wrap:wrap;justify-content:flex-end}
.home-info .row-b{opacity:.62}
.home-info a{color:inherit;transition:opacity .35s var(--ease)}
.home-info a:hover{opacity:.6}
body.home.opt-C .home-info{display:none}
@media (max-width:860px){
  .home-info{right:var(--nav-side-m);bottom:52px;font-size:9px}
}
.home-dots{position:fixed;right:var(--nav-side);bottom:calc(var(--nav-top) + 6px);
  z-index:100;display:flex;gap:7px;color:var(--home-ink)}
.home-dots b{width:5px;height:5px;border-radius:50%;background:currentColor;
  opacity:.3;transition:opacity .5s var(--ease);display:block}
.home-dots b.on{opacity:.95}

/* homepage layout options, all one identity */
body.home.opt-C .home-cap{display:none}
body.home.opt-E .top{opacity:.16}
body.home.opt-E:hover .top,body.home.opt-E .top:focus-within{opacity:1}
body.home.opt-E .home-cap,body.home.opt-E .home-dots{opacity:.34}
body.home.opt-E:hover .home-cap,body.home.opt-E:hover .home-dots{opacity:.85}
body.home.opt-D .stage{left:auto;width:64vw}
body.home.opt-D .split{position:fixed;left:0;top:0;bottom:0;width:36vw;
  background:var(--paper);color:var(--ink);z-index:60;
  padding:calc(var(--nav-top) + 64px) var(--nav-side) var(--nav-top);
  display:flex;flex-direction:column;justify-content:flex-end;gap:10px}
body.home.opt-D .top{color:var(--ink)}
body.home.opt-D .home-cap{display:none}
body.home:not(.opt-D) .split{display:none}
@media (max-width:860px){
  body.home.opt-D .stage{left:0;width:100vw;height:58svh;inset:auto 0 0 0;top:0}
  body.home.opt-D .split{position:static;width:auto;height:auto;margin-top:58svh;
    padding:22px var(--nav-side) 40px}
  body.home.opt-D{background:var(--paper)}
}

/* ============================================================
   COLLECTION. One identical frame for every piece, whatever the
   proportions of the photograph inside it.
   ============================================================ */
.grid{display:grid;gap:var(--g-y) var(--g-x);padding:var(--grid-mt) 0 var(--grid-mb);align-items:start;
  grid-template-columns:repeat(var(--cols,auto-fill),minmax(var(--min-col),1fr))}
.card{display:block;position:relative;
  transition:filter var(--hov-ms) var(--ease),opacity var(--hov-ms) var(--ease)}
.card-fig{position:relative;margin:0;overflow:hidden;background:var(--mat);
  aspect-ratio:var(--frame)}
/* the photograph fills its area completely: no frame, no letterboxing, and the
   object keeps its true proportions because it is scaled, not stretched */
.card-fig img{width:100%;height:100%;display:block;object-fit:var(--col-fit);object-position:var(--col-pos);
  padding:var(--frame-pad);transition:transform 1.3s var(--ease-out)}
.card-cap{display:flex;gap:0 8px;align-items:baseline;flex-wrap:wrap;
  padding-top:var(--cap-gap);position:relative}
.card-nm{color:var(--ink)}
.card-ty{color:var(--ink2);font-weight:var(--w-reg)}
.card-cap::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--ink2);opacity:.5;transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--ease-out)}
.card:hover .card-cap::before{transform:scaleX(1)}
/* the focus interaction: attention moves to the piece under the cursor.
   These selectors must out-rank the entrance rule (.js .grid.in .card),
   or the entrance pins opacity to 1 and the dim never shows. */
/* Only the photograph under the cursor softens. Everything else stays sharp. */
.card-fig img{filter:blur(0);transition:transform 1.3s var(--ease-out),
  filter var(--hov-ms) var(--ease),opacity var(--hov-ms) var(--ease)}
.card:hover .card-fig img,.js .grid.in .card:hover .card-fig img{
  filter:blur(var(--hov-blur));opacity:var(--hov-dim);transform:scale(var(--hov-scale))}

/* ============================================================
   PIECE PAGE. Information on the left, photography leading.
   ============================================================ */
.piece{display:grid;gap:var(--p-gap);padding:2px 0 64px;align-items:start;
  grid-template-columns:var(--info-w) minmax(0,1fr)}
body.info-right .piece{grid-template-columns:minmax(0,1fr) var(--info-w)}
body.info-right .spec{order:2}
.spec{position:sticky;top:calc(var(--nav-top) + 46px);align-self:start;min-width:0}
/* On the Studio page the text sits beside the portraits and then must scroll
   away with them. Sticky there would freeze it over the sections below. */
body.studio .spec{position:static}
.spec{text-align:var(--info-align)}
.spec h1,.spec h2{font-size:var(--t-name);letter-spacing:var(--ls);text-transform:var(--caps);
  font-weight:var(--w-name);margin:0 0 3px;line-height:1.3}
.spec .sub{color:var(--ink2);font-weight:var(--w-reg);margin:0 0 20px}
.essay{font-size:var(--t-desc);line-height:var(--lh);letter-spacing:var(--ls-body);
  margin:0 0 var(--text-gap);color:var(--ink);font-weight:var(--w-desc)}
.essay p{margin:0 0 .85em}
.dl{border-top:1px solid var(--line);margin:0 0 18px}
.dl div{display:grid;grid-template-columns:78px 1fr;gap:12px;padding:7px 0;
  border-bottom:1px solid var(--line)}
.dl dt{color:var(--ink2);margin:0;font-weight:var(--w-speclabel)}
.dl dd{margin:0;font-size:var(--t-cap);line-height:1.5;letter-spacing:var(--ls-body);
  font-weight:var(--w-spec)}
.note{font-size:var(--t-cap);line-height:1.55;color:var(--ink2);
  border-left:1px solid var(--line);padding-left:11px;margin:0 0 18px}
.piece-figs{display:flex;flex-direction:column;gap:var(--img-gap);min-width:0;
  max-width:var(--img-max)}
.pfig{position:relative;overflow:hidden;margin:0;background:var(--mat)}
.pfig img{width:100%;height:auto;display:block}

.inq{display:inline-flex;align-items:center;gap:9px;
  background:var(--btn-bg);color:var(--btn-fg);border:var(--btn-border);
  border-radius:var(--btn-radius);padding:var(--btn-py) var(--btn-px);
  font-size:var(--btn-size);letter-spacing:var(--btn-ls);text-transform:var(--caps);
  font-weight:var(--btn-weight);min-width:var(--btn-w);justify-content:center;
  transition:background .4s var(--ease),color .4s var(--ease)}
.inq:hover{background:var(--btn-bg-h);color:var(--btn-fg-h)}
.inq .ar{transition:transform .5s var(--ease-out)}
.inq:hover .ar{transform:translateX(3px)}
@media (pointer:coarse){.inq{min-height:44px;justify-content:center}}

/* the dimension drawing, the one drawn element on the site */
.dim{width:100%;height:auto;display:block;margin:5px 0 0;color:var(--ink2);opacity:.75;
  max-width:var(--img-max)}
.dim .dl-line,.dim .dl-tick,.dim .dl-ext{stroke:currentColor;stroke-width:1;
  vector-effect:non-scaling-stroke;fill:none}
.dim text{font-family:var(--font);font-size:8.5px;letter-spacing:var(--ls);fill:currentColor}

/* ---------- studio ---------- */
.prose{max-width:60ch}
.prose p{font-size:var(--t-body);line-height:var(--lh);margin:0 0 1em;letter-spacing:var(--ls-body)}
.exs{border-top:1px solid var(--line)}
.ex{display:grid;grid-template-columns:70px 1fr 100px;gap:clamp(14px,2.2vw,36px);
  padding:19px 0;border-bottom:1px solid var(--line);align-items:baseline}
.ex h3{font-size:var(--t-cap);letter-spacing:var(--ls);text-transform:uppercase;
  font-weight:var(--w-med);margin:0 0 4px}
.ex p{margin:0;font-size:var(--t-cap);line-height:1.6;color:var(--ink2);
  letter-spacing:var(--ls-body);max-width:62ch}
.ex .yr,.ex .vn{color:var(--ink2);font-weight:var(--w-reg)}
.ex .vn{text-align:right}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);margin-top:14px;
  padding:var(--footer-pad) 0 calc(var(--footer-pad) + 8px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:22px;
  background:var(--footer-bg);color:var(--footer-ink);text-align:var(--footer-align);font-size:var(--t-footer)}
.foot.hidden{display:none}
.foot .col{display:flex;flex-direction:column;gap:4px}
.foot a:hover{color:var(--ink)}
body.home .foot{display:none}

/* ---------- entrances (enhancement only) ---------- */
.js .rev{opacity:0;transform:translateY(10px);
  transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
.js .rev.in{opacity:1;transform:none}
.js .grid .card{opacity:0;transform:translateY(12px);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out),
             filter var(--hov-ms) var(--ease)}
.js .grid.in .card{opacity:1;transform:none}
.js .grid.in .card:nth-child(1){transition-delay:0ms}
.js .grid.in .card:nth-child(2){transition-delay:55ms}
.js .grid.in .card:nth-child(3){transition-delay:110ms}
.js .grid.in .card:nth-child(4){transition-delay:165ms}
.js .grid.in .card:nth-child(5){transition-delay:220ms}
.js .grid.in .card:nth-child(n+6){transition-delay:275ms}
.js .grid.done .card:nth-child(n){transition-delay:0ms !important}
.js .dim .dl-line{stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400);
  transition:stroke-dashoffset 1.4s var(--ease-out)}
.js .dim.in .dl-line{stroke-dashoffset:0}
/* Failsafe state. `.rev` and the drawing are pinned hard; grid cards are made
   visible WITHOUT !important so the hover focus still works underneath. */
.reveal-now .rev,.reveal-now .dim .dl-line{
  transition:none !important;opacity:1 !important;transform:none !important;
  stroke-dashoffset:0 !important}
.reveal-now .grid .card{transition:none;opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:860px){
  /* Sizes are now handled by the Tablet and Mobile layers in the editor,
     so this block only carries genuine layout changes. */
  .top{gap:14px;flex-wrap:wrap}
  .piece,body.info-right .piece{grid-template-columns:1fr;gap:26px}
  .spec,body.info-right .spec{position:static;order:0}
  .ex{grid-template-columns:1fr;gap:5px}
  .ex .vn{text-align:left}
  .home-cap{left:var(--nav-side-m);bottom:18px}
  .home-dots{right:var(--nav-side-m);bottom:20px}
}
@media (max-width:560px){
  .grid{grid-template-columns:repeat(var(--cols,auto-fill),minmax(var(--min-col),1fr))}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  /* A crossfade is not motion: nothing travels, nothing scales, one photograph
     simply replaces another. The phone homepage keeps it, so the four images
     fade into each other instead of snapping. Everything that actually moves
     stays suppressed by the rule above. */
  .mstage .slide{transition:opacity var(--m-fade) var(--ease) !important}
  .js .rev{opacity:1;transform:none}
  .js .grid .card{opacity:1;transform:none}
  .js .dim .dl-line{stroke-dashoffset:0}
  .grid.hovering .card{filter:none;opacity:1}
}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* ============================================================
   THE OPENING SCREEN
   The mark alone on a quiet ground. The same on every screen size:
   desktop, tablet and phone all run this, and nothing about it is
   gated on width any more.

   The fade-out is a CSS animation rather than a script. On a static
   site the page underneath must never depend on a JavaScript file
   arriving — if site.js is slow, blocked, or served stale from a cache,
   a script-driven overlay would strand the visitor on a blank ground
   for good. `both` holds the first keyframe through the delay and keeps
   the last one afterwards, so the sequence reads hold, fade, gone even
   if no script ever runs.

   visibility is stepped at 99% on purpose: a discrete property inside a
   keyframe range flips at the midpoint, which would cut the fade in half.
   ============================================================ */
.intro{position:fixed;inset:0;z-index:400;display:flex;
  align-items:center;justify-content:center;background:var(--intro-bg);
  animation:intro-out var(--intro-fade) var(--ease) var(--intro-hold) both;
  transition:opacity var(--intro-fade) var(--ease)}
.intro svg{width:var(--intro-logo);height:auto;fill:var(--ink)}
.intro.gone{opacity:0;visibility:hidden;pointer-events:none}

@keyframes intro-out{
  0%  {opacity:1;visibility:visible}
  99% {opacity:0;visibility:visible}
  100%{opacity:0;visibility:hidden}
}

/* ============================================================
   MOBILE. A layout of its own, not a shrunken desktop.
   Nothing in this block affects desktop or tablet.
   ============================================================ */

.mstage{display:none}

@media (max-width:640px){

  /* ---- The homepage IS the photograph. Edge to edge, top to bottom.
     No column, no panel, no margin, nothing behind the navigation. ---- */
  body.home{background:var(--m-hero-bg)}          /* never black, never a frame */
  body.home .wrap{padding:0;margin:0;max-width:none}
  body.home main{padding:0}

  body.home .stage{position:fixed;inset:0;width:100vw;height:100svh;
    background:var(--m-hero-bg);margin:0;padding:0;border:0}
  body.home .stage .slide img{width:100%;height:100%;
    object-fit:var(--m-hero-fit);object-position:var(--m-hero-x) var(--m-hero-y);
    transform:scale(var(--m-hero-scale))}
  /* when you have chosen phone photographs, the desktop set steps aside */
  body.home.m-ownimages .dstage{display:none}
  body.home.m-ownimages .mstage{display:block}
  .mstage .slide{transition:opacity var(--m-fade) var(--ease)}
  .mscrim{position:absolute;inset:0;pointer-events:none;
    background:var(--m-overlay-color);opacity:var(--m-overlay)}

  /* the navigation: a compact column laid straight onto the photograph */
  body.home.m-navcol .top{position:fixed;top:var(--m-nav-top);left:var(--m-nav-left);
    right:auto;bottom:auto;width:max-content;max-width:none;background:none;
    flex-direction:column;align-items:flex-start;justify-content:flex-start;
    /* the one gap between the mark and the navigation beneath it */
    gap:var(--m-logo-nav-gap,22px);padding:0;z-index:120}
  body.home.m-navcol .top .mark{display:block}     /* the normal header mark, at the top */
  body.home.m-navcol .nav{flex-direction:column;align-items:flex-start;
    justify-content:flex-start;flex-wrap:nowrap;width:max-content;
    gap:var(--m-nav-item-gap) 0}
  body.home.m-navcol .nav a{width:max-content;color:var(--home-ink);opacity:.85}
  body.home.m-navcol .nav a:hover,body.home.m-navcol .nav a[aria-current]{opacity:1}
  body.home.m-navcol .top .contact{display:none}

  /* Contact alone, at the very bottom */
  body.home.m-contactonly .nav .nav-contact{display:none}
  body.home.m-contactonly .home-info{display:flex;position:fixed;
    left:auto;right:var(--m-contact-right);bottom:var(--m-contact-bottom);
    align-items:flex-end;text-align:right;z-index:120;color:var(--home-ink)}
  body.home.m-contactonly .home-info .row-b{display:none}
  body.home.m-contactonly .home-info .row-a a:not(:first-child){display:none}

  body.home .home-cap{left:var(--m-nav-left);right:auto;
    bottom:var(--m-caption-bottom);text-align:left;z-index:120}
  body.home .home-dots{display:none}

  /* touch has no cursor, so no hover blur is forced onto it */
  .grid.hovering .card,.js .grid.in.hovering .card{filter:none;opacity:1}
  .card:hover .card-fig img,.js .grid.in .card:hover .card-fig img{
    filter:none;opacity:1;transform:none}
}

/* ---------------- exhibitions ----------------
   Editorial, image-led: a photograph carries each exhibition, the facts sit
   quietly beneath it. Every measurement is a token, so the editor can change
   the grid, the crop, the spacing and the type for each device on its own. */
.ex-grid{display:grid;align-items:start;
  gap:var(--ex-list-gy,44px) var(--ex-list-gx,26px);
  grid-template-columns:repeat(var(--ex-list-cols,2),minmax(0,1fr));
  padding:var(--ex-mt,0) 0 var(--ex-mb,72px)}
.ex-card{display:block;text-align:var(--ex-list-align,left)}
.ex-fig{position:relative;margin:0 0 12px;overflow:hidden;background:var(--mat);
  aspect-ratio:var(--ex-lead-ratio,4 / 5)}
.ex-fig img{width:100%;height:100%;display:block;
  object-fit:var(--ex-lead-fit,cover);object-position:var(--ex-lead-pos,center);
  transition:transform 1.3s var(--ease-out)}
.js .ex-card:hover .ex-fig img{transform:scale(var(--hov-scale,1))}
.ex-cap{display:flex;flex-direction:column;gap:3px}
.ex-nm{font-size:var(--ex-list-title,14px);letter-spacing:var(--ls);
  text-transform:var(--caps);color:var(--ink)}
.ex-mt{font-size:var(--ex-list-meta,10.5px);letter-spacing:var(--ls);
  text-transform:var(--caps);color:var(--ink2)}
.ex-tag{font-size:var(--ex-list-meta,10.5px);letter-spacing:var(--ls);
  text-transform:uppercase;color:var(--ink);margin-bottom:2px}

/* one exhibition */
.ex-page{display:grid;grid-template-columns:var(--ex-info-w,320px) minmax(0,1fr);
  gap:var(--p-gap,56px);align-items:start;
  padding:var(--ex-mt,0) 0 var(--ex-mb,72px);max-width:var(--ex-max,1180px)}
.ex-info{position:sticky;top:var(--nav-top,28px);text-align:var(--ex-align,left);
  display:flex;flex-direction:column;gap:var(--ex-text-gap,14px)}
.ex-info h1{margin:0;font-size:var(--ex-title,22px);line-height:1.15;
  letter-spacing:var(--ls);font-weight:var(--w-name,500)}
.ex-row{display:flex;gap:12px;font-size:var(--ex-meta,10.5px);letter-spacing:var(--ls);
  text-transform:var(--caps);color:var(--ink2)}
.ex-row .k{min-width:64px;color:var(--ink2)}
.ex-row .v{color:var(--ink)}
.ex-essay{font-size:var(--ex-body,13px)}
.ex-link{align-self:start}
.ex-shots{display:grid;gap:var(--ex-gy,18px) var(--ex-gx,18px);
  grid-template-columns:repeat(var(--ex-cols,2),minmax(0,1fr));padding:var(--ex-pad,0)}
.ex-shot{margin:0;overflow:hidden;background:var(--mat)}
.ex-shot img{width:100%;display:block;object-fit:var(--ex-fit,cover);
  object-position:var(--ex-pos,center)}
.ex-shots[data-ratio] .ex-shot,.ex-shot.ratio{aspect-ratio:var(--ex-ratio)}
.ex-back{padding-bottom:var(--section-gap,64px)}
body.exhibition .ex-shot img{aspect-ratio:var(--ex-ratio,auto);height:auto}
@media (max-width:860px){
  .ex-page{grid-template-columns:1fr;gap:24px}
  .ex-info{position:static}
}