/* Amanita — one stylesheet for the whole site.
   The gallery's off-white paper, near-black ink, Archivo for text, the gallery's own logo.
   Layout: a header with the logo and the menu always visible, content up to 1240px wide, generous white space between sections
   (that white space is also where Marcel walks). */
:root{
  --paper:#fbf9f9;
  --ink:#151313;
  --mute:#7d7675;
  --hair:rgba(21,19,19,.14);
  --shade:rgba(21,19,19,.05);
  --sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --wide:1240px;
  --gutter:max(16px, env(safe-area-inset-left, 0px));
  --gutter-r:max(16px, env(safe-area-inset-right, 0px));
  --gap:clamp(72px, 9vw, 120px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;
  padding-left:var(--gutter);padding-right:var(--gutter-r);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
button{font:inherit;color:inherit}
:focus-visible{outline:1.5px solid var(--ink);outline-offset:3px}
h1,h2,h3{font-weight:500;margin:0;text-wrap:balance}
em{font-style:italic}
p{margin:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:var(--paper);padding:6px 10px;z-index:100}
.skip:focus{left:16px}
.kicker,.sec{font-size:11.5px;text-transform:uppercase;letter-spacing:.11em;color:var(--mute);font-weight:500}
.meta{color:var(--mute)}
.who{font-style:normal}

/* header */
.top{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:12px 28px;padding-block:24px 22px;max-width:calc(var(--wide) + 0px);margin:0 auto}
.wm{display:block;width:94px;line-height:0;color:var(--ink)}   /* the wordmark's capitals the height of the menu's: it sits on the same line */
.wm:hover{text-decoration:none}
/* inside an exhibition or an artist: a hairline under the logo and menu */
.p-ex .top,.p-artist .top{border-bottom:1px solid var(--hair);margin-bottom:28px}
.logo{width:100%;height:auto;display:block;overflow:visible;fill:currentColor}
.menu{display:flex;flex-wrap:wrap;gap:4px 20px;font-size:13.5px}
.menu a[aria-current="page"]{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.menu .s{color:var(--mute)}
.menu .s::before{content:"";display:inline-block;width:9px;height:9px;border:1.3px solid currentColor;border-radius:50%;margin-right:6px;vertical-align:-1px}

/* the footer sits at the bottom of the window even when a page is short */
body{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
.top,main,.foot{width:100%}
main{display:block;flex:1 0 auto}
.inner{max-width:var(--wide);margin:0 auto}

/* home */
html{overflow-x:clip}
/* rows that scroll sideways: full-bleed to the window edge, the first card aligned with the page */
.rail-wrap{max-width:var(--wide);margin:var(--gap) auto 0}
.rail-wrap.big{margin-top:8px}
.railhead{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;min-height:28px}
.railnav{display:flex;gap:6px;margin-left:auto}
.railnav button{width:34px;height:28px;border:1px solid var(--hair);background:none;border-radius:999px;cursor:pointer;font-size:14px;line-height:1;padding:0}
.railnav button:hover:not(:disabled){border-color:var(--ink)}
.railnav button:disabled{opacity:.3;cursor:default}
@media (hover:none){.railnav{display:none}}
.rail{display:flex;gap:28px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
  --edge:max(var(--gutter),calc((100vw - var(--wide)) / 2));margin-inline:calc(-1 * var(--edge));padding-inline:var(--edge);scroll-padding-inline:var(--edge)}
.rail::-webkit-scrollbar{display:none}
.rail.drag{scroll-snap-type:none;cursor:grabbing;user-select:none}
.rail.drag a{pointer-events:none}
.rail>.card{flex:0 0 auto;scroll-snap-align:start}
.big .rail>.card{width:min(780px,86vw)}
.big.single .rail>.card{width:100%}
.rail-wrap:not(.big) .rail{gap:20px}
.rail-wrap:not(.big) .rail>.card{width:min(320px,62vw)}
.card a{display:grid;gap:14px;align-content:start}
.card a:hover{text-decoration:none}
.card a:hover h2,.card a:hover h3{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.card img,.card .noimg,.card .ph{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--shade);display:block}
.card.big img,.card.big .noimg,.card.big .ph{aspect-ratio:3/2}
.single .card.big img,.single .card.big .noimg,.single .card.big .ph{aspect-ratio:16/9}
.card .cap{display:grid;gap:6px}
.card.big h2{font-size:clamp(18px,1.9vw,24px);line-height:1.12}
.card h3{font-size:14px;line-height:1.3}
.card:not(.big) .meta{font-size:13px}
.row{max-width:var(--wide);margin:var(--gap) auto 0}
.row .sec{margin-bottom:16px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 20px}
@media (max-width:900px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Upcoming on the home page: one wide announcement per show, picture optional */
.next{max-width:var(--wide);margin:64px auto 0}
.next+.rail-wrap{margin-top:64px}
.next-show a,.next-show .next-in{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr) auto;gap:clamp(20px,3vw,40px);align-items:center;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:18px 0}
.next-show+.next-show a,.next-show+.next-show .next-in{border-top:0}
.next-show a:hover{text-decoration:none}
.next-show a:hover h3,.next-show a:hover .go{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.next-img img,.next-img .ph{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--shade);display:block}
.next-text{display:grid;gap:8px}
.next-text h3{font-size:clamp(19px,1.8vw,24px);line-height:1.12;font-weight:500}
.next-show .go{font-size:13.5px;white-space:nowrap}
.next-show.noimg a{grid-template-columns:minmax(0,1fr) auto}
.next-show .next-in{grid-template-columns:minmax(0,360px) minmax(0,1fr)}
.next-show.noimg .next-in{grid-template-columns:1fr}
@media (max-width:700px){
  .next,.next+.rail-wrap{margin-top:48px}
  .next-show a,.next-show .next-in{grid-template-columns:minmax(0,34%) minmax(0,1fr);gap:16px;padding:14px 0}
  .next-show.noimg a{grid-template-columns:1fr}
  .next-show .go{display:none}
  .next-text h3{font-size:17px}
}

/* page heads, archive lists */
.pagehead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 28px;margin:14px 0 30px}
.pagehead:not(:has(> :not(.vh))){margin:0;height:28px}
.pagehead h1{font-size:clamp(21px,2.5vw,30px);line-height:1}
.filters{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px}
.filters .grp{display:flex;gap:4px 14px;flex-wrap:wrap}
.filters button,.filters a{background:none;border:0;padding:0 0 2px;cursor:pointer;color:var(--mute);border-bottom:1px solid transparent}
.filters button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.filters a:hover{color:var(--ink);text-decoration:none}
.filters .sep{width:1px;background:var(--hair);align-self:stretch}
.arc{display:grid;grid-template-columns:minmax(260px,38%) minmax(0,1fr);gap:40px}
.list{list-style:none;margin:0;padding:0;font-size:14px}
.list .yr{font-size:11.5px;text-transform:uppercase;letter-spacing:.11em;color:var(--mute);padding:24px 0 6px;border-bottom:1px solid var(--hair)}
.list .yr:first-child{padding-top:0}
.list li[hidden]{display:none}
.list a,.list .nolink{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--hair);color:var(--mute);transition:color .2s}
.list a:hover,.list a.on,.list a:focus-visible,.list .nolink:hover,.list .nolink.on{color:var(--ink);text-decoration:none}
.list .nolink{cursor:default}
.list .t{color:inherit}
.list .t .who{color:inherit}
.list .v{font-size:12.5px;white-space:nowrap}
.list .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.names{font-size:clamp(16px,1.6vw,20px);line-height:1.25}
.p-artists .names{max-width:544px}
.p-artists .names a{border-bottom:0;padding:4px 0}
.names a{padding:6px 0}
.view{position:sticky;top:20px;align-self:start;display:grid;gap:12px}
.frame{margin:0;aspect-ratio:4/3;background:var(--shade);overflow:hidden}
.frame img{width:100%;height:100%;object-fit:cover;transition:opacity .3s}
/* artists: each artist's detail shot, portrait */
.artists .view{justify-items:start}
.artists .frame{aspect-ratio:4/5;width:min(100%,calc((100vh - 150px) * .8))}
.frame img:not([src]){opacity:0}
.arccap{min-height:22px;color:var(--mute);font-size:13.5px}
@media (max-width:760px){
  .arc{grid-template-columns:1fr}
  .view{display:none}
  .list a,.list .nolink{row-gap:2px}
  .list [data-date]::after{content:attr(data-date);grid-column:1/-1;font-size:12.5px}
}

/* exhibition and artist pages */
.exhead{display:grid;gap:8px;max-width:760px;margin:8px 0 28px}
.exhead h1{font-size:clamp(19px,1.8vw,25px);line-height:1.1}
.exhead .sub{font-size:16px}
.exhead .meta{margin-top:6px;line-height:1.55}
/* exhibition pages: the title above the pictures; place, dates and Inquire under them, before the text */
.exinfo{display:grid;gap:8px;margin-top:40px;line-height:1.55}
.exinfo .actions{margin-top:6px}
.exinfo + .text{margin-top:44px}
.actions{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:10px;font-size:14px}
.actions a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
figcaption{font-size:13px;color:var(--mute);max-width:70ch}

/* slideshow: one picture at a time on a quiet stage; caption, counter and controls underneath; an index of all pictures on request.
   Without JavaScript the pictures simply follow one another. */
.slideshow{max-width:var(--wide)}
.ss-stage{display:grid;gap:clamp(36px,5vw,64px)}
.ss-slide{margin:0;display:grid;gap:10px}
.ss-slide img,.ss-slide .ph{width:100%;max-height:80vh;object-fit:contain;object-position:left center}
.slideshow.on .ss-stage{display:block;position:relative;height:clamp(320px,74vh,880px);cursor:e-resize;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.slideshow.on .ss-stage.back{cursor:w-resize}
.slideshow.on .ss-slide{display:block;position:absolute;inset:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
.slideshow.on .ss-slide.on{opacity:1;visibility:visible;transition:opacity .35s ease}
.slideshow.on .ss-slide img{width:100%;height:100%;max-height:none;object-fit:contain;object-position:center}
.slideshow.on .ss-slide .ph{height:100%;aspect-ratio:auto}
.slideshow.on figcaption{display:none}
.ss-grid{display:inline-flex;align-items:center;align-self:center;padding:2px 0 2px 2px!important;line-height:0}
.ss-grid svg{fill:none;stroke:currentColor;stroke-width:.9;opacity:.7}
.ss-grid svg .f{fill:var(--paper)}
.ss-grid:hover svg,.ss-grid[aria-pressed="true"] svg{opacity:1}
.ss-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 28px;align-items:start;margin-top:14px;font-size:13px}
.ss-cap{color:var(--mute);min-height:2.7em;max-width:80ch}
.ss-cap em{color:var(--ink)}
.ss-nav{display:flex;gap:18px;align-items:baseline;white-space:nowrap}
.ss-nav button{background:none;border:0;padding:0;cursor:pointer;color:var(--ink);font-size:13px}
.ss-nav button:hover{text-decoration:underline;text-underline-offset:3px}
.ss-nav button[aria-pressed="true"]{text-decoration:underline;text-underline-offset:3px}
.ss-count{font-variant-numeric:tabular-nums;color:var(--mute)}
.ss-index{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:16px}
.ss-index[hidden]{display:none}
.ss-index button{border:0;padding:6px;background:transparent;cursor:pointer;aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.ss-index button:hover,.ss-index button[aria-current="true"]{background:var(--shade)}
.ss-index img,.ss-index .ph{width:100%;height:100%;object-fit:contain}
.slideshow.indexing .ss-stage{display:none}
.slideshow.indexing .ss-cap{visibility:hidden;min-height:0;height:0;overflow:hidden}   /* the grid: no caption above it */
@media (max-width:700px){
  .slideshow.on .ss-stage{height:clamp(280px,62vh,620px)}
  .ss-bar{grid-template-columns:1fr}
  .ss-nav{justify-content:space-between}
  .ss-index{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
}
.text{max-width:66ch;margin-top:var(--gap);display:grid;gap:1.1em;font-size:16px;line-height:1.62}
.text a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.more{margin-top:var(--gap);display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:36px 48px;max-width:var(--wide)}
.more ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px;font-size:14.5px}
.more .meta{font-size:13px}
.pager{margin-top:var(--gap);display:grid;grid-template-columns:1fr 1fr;gap:20px;border-top:1px solid var(--hair);padding-top:16px;font-size:14px}
.pager a{display:grid;gap:3px}
.pager a[rel="next"]{text-align:right}
.pager .meta{font-size:11.5px;text-transform:uppercase;letter-spacing:.11em}

/* press */
.presslist{list-style:none;margin:0;padding:0;max-width:980px}
.presslist .yr{font-size:11.5px;text-transform:uppercase;letter-spacing:.11em;color:var(--mute);padding:26px 0 6px;border-bottom:1px solid var(--hair)}
.presslist .yr:first-child{padding-top:0}
.presslist a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 24px;padding:12px 0;border-bottom:1px solid var(--hair)}
.presslist a:hover{text-decoration:none}
.presslist a:hover .t{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.presslist .t{font-size:15px;line-height:1.3}
.presslist .v{grid-column:1;color:var(--mute);font-size:13.5px}
.presslist .dt{grid-column:2;grid-row:1;color:var(--mute);font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:600px){.presslist a{grid-template-columns:1fr}.presslist .dt{grid-column:1;grid-row:auto}}

/* shop */
.shop{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 28px}
.product{display:grid;gap:10px;align-content:start}
.product img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--shade)}
.product h2{font-size:15.5px;line-height:1.25}
.product .blurb{color:var(--mute);font-size:14px}
.product details{font-size:13px;color:var(--mute)}
.product summary{cursor:pointer;color:var(--ink)}
.product dl{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:8px 0 0}
.product dt{color:var(--mute)}
.product dd{margin:0;color:var(--ink)}
.buy{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--hair);padding-top:10px;margin-top:2px}
.price{font-variant-numeric:tabular-nums}
.btn{border:1px solid var(--ink);padding:5px 16px;border-radius:2px}
.btn:hover{background:var(--ink);color:var(--paper);text-decoration:none}
.note{margin-top:var(--gap);color:var(--mute)}
.note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){.shop{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.shop{grid-template-columns:1fr}}

/* about: locations as rows on the left, contact in a column on the right */
.ab{margin-top:8px}
.ab-grid{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(260px,1fr);gap:40px 72px;align-items:start}
.locs{display:grid}
.loc{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px;padding-block:28px;border-top:1px solid var(--hair)}
.loc:first-child{padding-top:0;border-top:0}
.loc figure{margin:0;background:var(--shade)}
.loc img,.loc .ph{width:100%;aspect-ratio:3/2;object-fit:cover}
.loc-text{display:grid;gap:8px;align-content:start;font-size:14.5px}
.loc h2{font-size:clamp(16px,1.5vw,19px);line-height:1.2}
.loc .meta{line-height:1.6}
.dir{justify-self:start;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.contact{display:grid;gap:14px;font-size:14.5px;position:sticky;top:24px}
.contact .crow{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;border-top:1px solid var(--hair);padding-top:10px;position:relative}
.contact .crow > span:first-child{color:var(--mute)}
.join{display:flex;gap:8px;border-bottom:1px solid var(--ink);padding-bottom:6px}
.join input{flex:1;min-width:0;border:0;background:none;color:var(--ink);font:inherit;outline:none}
.join input::placeholder{color:var(--mute)}
.join button{background:none;border:0;cursor:pointer;padding:0}
@media (max-width:900px){.ab-grid{grid-template-columns:1fr}.contact{position:static;max-width:560px}}
@media (max-width:560px){.loc{grid-template-columns:1fr;gap:12px}}

/* 404 */
.nf{display:grid;gap:12px;padding-block:40px 0}
.nf h1{font-size:clamp(21px,2.5vw,30px)}
.nf a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* footer */
.foot{max-width:var(--wide);margin:var(--gap) auto 0;padding-top:18px;padding-bottom:calc(48px + env(safe-area-inset-bottom, 0px));border-top:1px solid var(--hair);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;font-size:13px;color:var(--mute)}
.foot b{display:block;color:var(--ink);font-weight:500}
@media (max-width:760px){.foot{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* search */
.search{position:fixed;inset:0;z-index:60;background:rgba(251,249,249,.96);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:calc(22px + env(safe-area-inset-top,0px)) var(--gutter-r) 40px var(--gutter);overflow-y:auto}
.search-in,.search-page input{max-width:820px;margin:0 auto}
.search-in{display:flex;gap:16px;align-items:center;border-bottom:1.5px solid var(--ink);padding-bottom:10px}
.search-in input,.search-page input{flex:1;min-width:0;border:0;background:none;color:var(--ink);font:inherit;font-size:clamp(22px,3.2vw,34px);outline:none}
.search-page input{display:block;width:100%;border-bottom:1.5px solid var(--ink);padding-bottom:10px}
.search-in input::placeholder,.search-page input::placeholder{color:var(--mute)}
.search-in button{background:none;border:0;cursor:pointer;color:var(--mute);font-size:13.5px}
.results{max-width:820px;margin:22px auto 0;display:grid;gap:26px}
.results h2{font-size:11.5px;text-transform:uppercase;letter-spacing:.11em;color:var(--mute);font-weight:500;margin:0 0 6px}
.results ul{list-style:none;margin:0;padding:0}
.results a{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--hair);padding:9px 0}
.results a span:last-child{color:var(--mute);font-size:13px;text-align:right}
.results mark{background:none;color:inherit;text-decoration:underline;text-underline-offset:3px}
.hint{color:var(--mute)}

/* travelling letters (inner pages) */
.fly{position:fixed;left:0;top:0;z-index:30;pointer-events:none;line-height:0;transition:opacity .45s ease;will-change:transform}
.fly svg{display:block;height:100%;width:auto;overflow:visible;fill:var(--ink)}
.fly.dim{opacity:.2}
body.mode-fly .wm path{visibility:hidden}
body[data-letters] .inner{padding-right:clamp(34px,5vw,72px)}

/* Marcel */
.marcel{position:absolute;left:0;top:0;z-index:40;width:var(--mw);aspect-ratio:209/200;border:0;background:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.marcel.gone{opacity:0!important;transition:opacity .4s ease}
.m-sprite{position:absolute;inset:0;background-repeat:no-repeat}
.m-walk{background-image:url("marcel/marcel-walk.webp");background-size:1600% 100%}
.m-sit{background-image:url("marcel/marcel-sit.webp");background-size:800% 800%}
.m-shadow{position:absolute;left:14%;right:8%;bottom:1.5%;height:7px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.18),transparent)}
.m-tag{position:absolute;left:50%;bottom:calc(100% - 4px);transform:translate(-50%,4px);font:500 12px/1 var(--sans);color:var(--ink);background:var(--paper);border:1px solid var(--hair);padding:5px 8px;border-radius:3px;white-space:nowrap;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none}
.marcel.tag .m-tag{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto!important}
  .frame img,.fly,.list a{transition:none}
}
@media print{.top .menu,.foot,.search,.marcel,.fly{display:none!important}}

/* previews only: a picture that isn't available yet */
.ph{display:block;width:100%;aspect-ratio:4/3;background:var(--shade)}