@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-regular.woff) format("woff")}
@font-face{font-family:"Inter";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/inter-italic.woff) format("woff")}
*{box-sizing:border-box}
:root{--bg:#fff;--fg:#111;--mute:#444;--line:#ddd;--gap:clamp(4rem,12vh,8rem);--left:clamp(22px,8vw,140px);--right:clamp(16px,4vw,48px);--cap:190px}
html{scroll-behavior:smooth;scroll-padding-top:64px;color-scheme:light}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 "Inter",system-ui,-apple-system,"Segoe UI",sans-serif;padding-bottom:env(safe-area-inset-bottom)}
a{color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bar{position:sticky;top:0;z-index:5;padding:calc(.9rem + env(safe-area-inset-top)) var(--right) .9rem max(var(--left),env(safe-area-inset-left));background:rgb(255 255 255/.92);backdrop-filter:blur(6px);font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase}
.bar nav{display:flex;gap:.9rem;justify-content:flex-end}
.bar a{text-decoration:none;color:var(--mute)}
.bar a[aria-current]{color:var(--fg)}
.bar a:hover{color:var(--fg)}
.wrap,.page{padding-left:max(var(--left),env(safe-area-inset-left));padding-right:var(--right)}
.wrap{margin-top:clamp(1.5rem,5vh,3rem)}
.stop{max-width:980px}
.stop+.stop{margin-top:var(--gap)}
.stop figure+figure{margin-top:clamp(2.5rem,7vh,4.5rem)}
figure{margin:0;display:grid;grid-template-columns:minmax(0,1fr) var(--cap);gap:clamp(16px,2.5vw,32px);align-items:center}
img{display:block;width:100%;height:auto;aspect-ratio:var(--r)}
.stop img{cursor:zoom-in}
figcaption{font-size:.75rem;line-height:1.5;font-style:normal;font-weight:400;color:var(--mute);text-align:center}
figcaption h2,figcaption p{font:inherit;color:inherit;margin:0}figcaption h2{font-style:italic}
.credit{margin-top:.5rem}.credit summary{cursor:pointer}
@media(max-width:699px){figure{display:block}figcaption{text-align:center;padding-top:.8rem}}
.back{margin:0 0 clamp(1.5rem,5vh,3rem);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}.back a{text-decoration:none;color:var(--mute)}.back a:hover{color:var(--fg)}
.more{display:block;margin-top:.7rem;color:var(--fg);text-decoration:none;font-size:.75rem;letter-spacing:.04em}.more:hover{text-decoration:underline}
.page{max-width:760px;padding-top:clamp(2rem,8vh,4rem);padding-bottom:4rem;line-height:1.7}
.page p{margin:0 0 1.4rem}.page a{text-underline-offset:3px}
.prog{position:fixed;top:env(safe-area-inset-top);left:0;right:0;height:2px;z-index:10;background:var(--fg);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.idx{display:none;position:fixed;left:max(14px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));z-index:7;padding:.55rem .25rem;border:0;background:none;mix-blend-mode:difference;color:#fff;font:inherit;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.js .idx{display:block}
dialog::backdrop{background:rgb(0 0 0/.45)}
dialog.zoom{border:0;padding:0;margin:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;background:var(--bg)}dialog.zoom[open]{display:flex;flex-direction:column}.zcap{flex:none;padding:.2rem 1rem calc(.9rem + env(safe-area-inset-bottom));font-size:.75rem;line-height:1.5;text-align:center;color:var(--mute)}.zcap h2,.zcap p{font:inherit;margin:0}.zcap h2{font-style:italic}.zcap:empty{display:none}
dialog.zoom::backdrop{background:#fff}
dialog.zoom img{display:block}
.js .stop figure{opacity:0;transform:translateY(20px);transition:opacity 1.3s ease,transform 1.3s ease}
.js .stop figure.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .stop figure{opacity:1;transform:none;transition:none}}
.views{display:flex;gap:1.1rem;margin:0 0 clamp(1.5rem,4vh,2.5rem);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.views button{border:0;background:none;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--mute);cursor:pointer}
.views button[aria-pressed=true]{color:var(--fg)}
.stop.gridview{max-width:1200px;display:flex;flex-wrap:wrap;gap:.9rem;--H:clamp(150px,26vh,250px)}
.stop.gridview::after{content:"";flex:999 1 0}
.stop.gridview figure,.stop.gridview figure+figure{display:block;position:relative;margin:0;cursor:zoom-in;flex:var(--r) 1 calc(var(--r)*var(--H));min-width:150px}
.js .stop.gridview figure{opacity:1;transform:none;transition:opacity .22s ease}
.stop.gridview img{width:100%;height:auto;aspect-ratio:var(--r);transition:transform .22s ease}
.stop.gridview figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.stop.gridview figure:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
@media(hover:hover){.js .stop.gridview:hover figure:not(:hover){opacity:.7}.stop.gridview figure:hover{z-index:2}.stop.gridview figure:hover img{transform:scale(1.04)}}
@media(prefers-reduced-motion:reduce){.stop.gridview *{transition:none!important}.stop.gridview figure:hover img{transform:none}}

/* images: no dragging, no long-press save menu, no selection (deterrent only; screenshots are fine) */
img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
/* source wipe (prototype): source photo clipped at the right edge, hairline handle, drag left */
.pic{position:relative;overflow:hidden}
.pic>img.src{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;clip-path:inset(0 0 0 98%);pointer-events:none;cursor:default}
.hd{position:absolute;top:0;bottom:0;left:98%;width:26px;margin-left:-13px;padding:0;border:0;background:none;cursor:ew-resize;touch-action:none;display:none}
.js .hd{display:block}
.hd::after{content:"";position:absolute;top:0;bottom:0;left:12px;width:2px;background:var(--fg);opacity:.85}
.pic.ease .src{transition:clip-path .55s ease}.pic.ease .hd{transition:left .55s ease}
.reveal{display:none;margin:.5rem auto 0;border:0;background:none;padding:0;font:inherit;color:var(--mute);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.js .reveal{display:block}.reveal:hover{color:var(--fg)}
.cr{margin:.35rem 0 0;opacity:0;transition:opacity .4s ease}
figure.open .cr,.zcap.open .cr{opacity:1}
.stop.gridview .pic .src,.stop.gridview .pic .hd{display:none}
.stop.gridview .pic{overflow:visible}
/* enlarged view */
.zbox{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
dialog.zoom .zbox>img{width:100%;height:100%;flex:none;min-height:0;aspect-ratio:auto;object-fit:contain;padding:0;cursor:zoom-out}
.zbox>.pic{flex:none}dialog.zoom .zbox>.pic>img:first-child{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;cursor:zoom-out}
.zbox>.pic>img.src{cursor:default}
@media(prefers-reduced-motion:reduce){.pic.ease .src,.pic.ease .hd,.cr{transition:none!important}}
/* Index: skinny list opening over the word Index. Default: faint page-colour box. data-idx="blend": no box, text inverts against the image */
div.index{z-index:7;position:fixed;inset:auto auto max(14px,env(safe-area-inset-bottom)) calc(max(14px,env(safe-area-inset-left)) - .6rem);margin:0;padding:.3rem 2.6rem 0 .6rem;border:0;max-height:calc(100svh - 28px);overflow:auto;scrollbar-width:none;background:linear-gradient(to right,rgb(255 255 255/.6),rgb(255 255 255/0));color:var(--fg);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
div.index::-webkit-scrollbar{display:none}
div.index ol{list-style:none;margin:0;padding:0}
div.index a,div.index .x{display:block;width:100%;padding:.2rem .25rem;border:0;background:none;font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:left;color:inherit;text-decoration:none;cursor:pointer}
div.index .x{padding:.55rem .25rem}
div.index a:hover{text-decoration:underline;text-underline-offset:3px}
dialog.zoom img[hidden]{display:none}
div.index[hidden]{display:none}
/* Index look: faint gradient box on every device (decided 28 Oct) */
/* CV on the Francis Ruyter page: sections open on click */
.cv{margin-top:3.2rem;font-size:.85rem;line-height:1.55}
.cv h2{font:inherit;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;margin:0 0 1rem;color:var(--mute)}
.cv .cvhead{margin:0 0 1.6rem}
.cv details{border-top:1px solid rgb(0 0 0/.12)}.cv details:last-of-type{border-bottom:1px solid rgb(0 0 0/.12)}
.cv summary{list-style:none;cursor:pointer;padding:.7rem 0;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;display:flex;justify-content:space-between;gap:1rem}
.cv summary::-webkit-details-marker{display:none}
.cv summary::after{content:"+";color:var(--mute)}.cv details[open]>summary::after{content:"–"}
.cv .cvb{padding:.2rem 0 1.4rem}
.cv .cvb p{margin:0 0 .9rem}.cv .cvb h3{font:inherit;font-size:.75rem;letter-spacing:.06em;color:var(--mute);margin:1.5rem 0 .5rem}
.cv .cvb h3:first-child{margin-top:.4rem}.cv .cvb h4{font:inherit;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin:1.8rem 0 .7rem}
.cv summary:focus-visible{outline:1px solid currentColor;outline-offset:2px}
/* slow slideshow room: figures stacked in one grid cell, crossfading; works without fixed heights */
.stop.show.live{display:grid;max-width:none;min-height:calc(100vh - 12rem);min-height:calc(100svh - 12rem);align-items:center}
.js .stop.show.live figure{grid-area:1/1;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;opacity:0;transform:none;transition:opacity 2s ease;pointer-events:none}
.js .stop.show.live figure.on{opacity:1;pointer-events:auto}
.stop.show.live figure+figure{margin-top:0}
.stop.show.live img{width:auto;height:auto;aspect-ratio:auto;max-width:100%;max-height:calc(100vh - 15rem);max-height:calc(100svh - 15rem);object-fit:contain}
.stop.show.live figcaption{padding:0;text-align:center;min-height:3.2rem}
.js .stop.show.live.still figure{transition:none}
.step{display:flex;justify-content:center;gap:1.4rem;margin:1rem 0 0;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.step button{border:0;background:none;padding:.4rem .6rem;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer}
.step button:hover{color:var(--fg)}
.step span{padding:.4rem 0;font-variant-numeric:tabular-nums}
/* Francis Ruyter page: top block and CV share one text size */
.page{font-size:.85rem;line-height:1.6}.cv{font-size:inherit;line-height:inherit}
/* room-to-room arrows at the foot of every room */
.rooms{display:flex;justify-content:space-between;max-width:980px;margin:clamp(3rem,9vh,5rem) 0 clamp(2.5rem,8vh,4rem);font-size:1.1rem;letter-spacing:.08em}
.rooms a{text-decoration:none;color:var(--mute);padding:.4rem .6rem .4rem 0}.rooms a[rel=next]{padding:.4rem 0 .4rem .6rem}.rooms a:hover{color:var(--fg)}
.rooms a:focus-visible{outline:1px solid currentColor;outline-offset:2px}
/* desktops and horizontal tablets: Artwork page sits about 100px further right, clear of the Index box */
@media(min-width:900px){.wrap.home{padding-left:calc(max(var(--left),env(safe-area-inset-left)) + 100px)}}
/* Index: one slow fade the first time a visitor lands, so the word reads as something that opens */
@keyframes idxfade{0%,100%{opacity:1}50%{opacity:.2}}
.idx.hint{animation:idxfade 3.4s ease-in-out 1}
@media(prefers-reduced-motion:reduce){.idx.hint{animation:none}}