/* shared base; each sketch sets the tokens on :root */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html.sn-lock{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-b);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
[hidden]{display:none!important}
.sn-wrap{padding-left:max(var(--gut,16px),env(safe-area-inset-left,0px));padding-right:max(var(--gut,16px),env(safe-area-inset-right,0px))}
.sn-k{font-family:var(--f-m);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:0}
.sn-sold{display:inline-block;font-family:var(--f-m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;border:1px solid currentColor;padding:1px 7px;border-radius:99px}
.sn-sel{user-select:all}

/* nav + language switch */
.sn-nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px}
.sn-nav a{text-decoration:none;color:var(--mute);transition:color .2s}
.sn-nav a:hover,.sn-nav a.on{color:var(--fg)}
/* Work opens a small submenu (Available, Archive) on hover or keyboard focus; the small arrow next to Work shows
   that there is one and opens it with a click or tap (the submenu floats below the menu, so nothing moves) */
.sn-dd{position:relative;display:inline-flex;align-items:center}
.sn-ddb{display:inline-flex;align-items:center;justify-content:center;min-width:18px;min-height:18px;margin-left:1px;padding:0;border:0;background:none;color:inherit;font:inherit;font-size:.72em;line-height:1;cursor:pointer;transition:transform .2s}
.sn-dd:hover .sn-ddb,.sn-dd:focus-within .sn-ddb,.sn-dd.open .sn-ddb{transform:rotate(180deg)}
.sn-dd.open .sn-sub{opacity:1;visibility:visible;transform:none}
.sn-sub{position:absolute;top:100%;left:-14px;z-index:40;display:flex;flex-direction:column;gap:6px;min-width:150px;padding:12px 14px;margin-top:6px;background:var(--panel,var(--bg));border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.08);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .18s,transform .18s,visibility .18s}
.sn-sub::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.sn-dd:hover .sn-sub,.sn-dd:focus-within .sn-sub{opacity:1;visibility:visible;transform:none}
.sn-dd:has(.sn-sub a.on)>a{color:var(--fg)}
@media (hover:none){
  .sn-ddb{min-width:28px;min-height:28px;margin-left:2px}
  .sn-dd:hover .sn-sub,.sn-dd:focus-within .sn-sub{opacity:0;visibility:hidden;transform:translateY(-4px)}
  .sn-dd:hover .sn-ddb,.sn-dd:focus-within .sn-ddb{transform:none}
  .sn-dd.open .sn-sub{opacity:1;visibility:visible;transform:none}
  .sn-dd.open .sn-ddb{transform:rotate(180deg)}
  .sn-sub{left:-10px;gap:14px;padding:14px 16px;border:1px solid var(--fg,#000)}
}
.sn-lang{border:1px solid var(--line);background:transparent;border-radius:99px;padding:4px 11px;min-height:32px;cursor:pointer;font-family:var(--f-m);font-size:12px;color:var(--mute)}
.sn-lang b{font-weight:400}
.sn-lang b.on{color:var(--fg);font-weight:600}
.sn-lang:hover{border-color:var(--fg)}

/* pages */
.sn-page{padding-block:clamp(40px,5vw,72px) 160px}
/* while the page scrolls, finds passing under the pointer do not react (no random growing or vanishing) */
.sn-scrolling .t{pointer-events:none}
.sn-page h1{font-family:var(--f-d);font-weight:400;text-wrap:balance;margin:.25em 0 .5em;font-size:clamp(28px,3.6vw,48px);line-height:1.1;max-width:22ch}
.sn-prose{max-width:68ch;min-width:0}
.sn-prose h2{font-family:var(--f-d);font-weight:500;font-size:24px;margin:1.6em 0 .4em}
.sn-prose p{margin:0 0 1em}
.sn-profile,.sn-studio,.sn-contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 56px;align-items:start}
.sn-pf-hero{margin:0}
.sn-pf-hero img{width:100%;aspect-ratio:4/5;object-fit:cover}
.sn-pf-hero.wide img{aspect-ratio:4/3}
.sn-pf-grid{grid-column:1/-1;columns:4 200px;column-gap:16px;margin-top:24px}
/* profile, studio, contact: original order, laid out as a field like the start page */
/* spacing: generous air between blocks, text kept to a readable measure and set off from the images beside it;
   images scroll with the page (a sticky one ended up covering the content below it) */
.sn-flow{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(56px,7vw,104px) 22px;align-items:start;padding-block:clamp(48px,6vw,88px) 160px}
.fx-t{grid-column:var(--s)/span 6;min-width:0;max-width:62ch;padding-inline:clamp(0px,2.4vw,40px)}
.fx-t h2{font-family:var(--f-d);font-weight:600;font-size:clamp(24px,2.8vw,38px);line-height:1.1;letter-spacing:-.01em;margin:1.6em 0 .6em}
.fx-t h2:first-child{margin-top:0}
.fx-t p{margin:0 0 1.15em;font-size:17px;line-height:1.65}
.fx-t .sn-pf{margin:0 0 24px}
.fx-i{grid-column:var(--s)/span var(--w);margin:var(--mt) 0 0;min-width:0}
.fx-i img{width:100%;height:auto;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.fx-i:hover img{transform:translateY(-4px) scale(1.02)}
.fx-i figcaption{font-size:13px;color:var(--mute);margin-top:6px}
/* profile: wider lead text beside the main image, the long text below in two columns, photos in justified rows */
.fx-t.pf-intro{grid-column:var(--is,6)/-1;max-width:none}
.fx-t.pf-intro p{font-size:clamp(18px,1.7vw,24px);line-height:1.25}
.fx-t.pf-more{grid-column:1/-1;max-width:none;padding-inline:0}
.fx-t.pf-more p{columns:2;column-gap:clamp(28px,4vw,64px)}
.pf-g{grid-column:1/-1;display:flex;flex-direction:column;gap:22px}
.pf-r{display:flex;gap:22px}
.pf-r figure{margin:0;min-width:0;flex:var(--r) 1 0}
.pf-r img{display:block;width:100%;height:auto;aspect-ratio:var(--r);object-fit:cover}
.pf-r figcaption{font-size:13px;color:var(--mute);margin-top:6px}
/* page photos (profile, studio, material): a click shows that photo large above its row, the row stays as it is */
.pf-r{flex-wrap:wrap}
.pf-r img{cursor:zoom-in}
.pf-r figure.on img,.pf-grid figure.on img{outline:2px solid var(--lehm,var(--fg));outline-offset:-2px}
/* the material page as a mosaic: square cells, a portrait 3 × 4, a landscape 4 × 3, a square 3 × 3; the clicked
   photo doubles in place and the others fill the gaps around it (dense packing) */
.pf-mos{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:var(--u,6vw);grid-auto-flow:row dense;gap:10px}
.pf-mos > figure{margin:0;min-width:0;position:relative;overflow:hidden}
.pf-mos > figure img{display:block;width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.pf-mos > figure figcaption{position:absolute;left:0;bottom:0;margin:0;padding:3px 6px;background:var(--bg,#fff);font-size:12px}
.pf-mos > .p{grid-column:span 3;grid-row:span 4}
.pf-mos > .l{grid-column:span 4;grid-row:span 3}
.pf-mos > .s{grid-column:span 3;grid-row:span 3}
.pf-mos > .p.big{grid-column:span 6;grid-row:span 8}
.pf-mos > .l.big{grid-column:span 8;grid-row:span 6}
.pf-mos > .s.big{grid-column:span 6;grid-row:span 6}
.pf-mos > .big img{cursor:zoom-out}
::view-transition-group(*){animation-duration:.4s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
@media (max-width:700px){
  .pf-mos{gap:6px}
  .pf-mos > .p{grid-column:span 6;grid-row:span 8}
  .pf-mos > .l,.pf-mos > .l.big{grid-column:span 12;grid-row:span 9}
  .pf-mos > .s{grid-column:span 6;grid-row:span 6}
  .pf-mos > .p.big{grid-column:span 12;grid-row:span 16}
  .pf-mos > .s.big{grid-column:span 12;grid-row:span 12}
}
/* the material page: an even grid, every photo the same size and shape */
.pf-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start}
.pf-grid > figure{margin:0;min-width:0}
.pf-grid > figure img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;cursor:zoom-in}
.pf-grid > .pf-zoom{grid-column:1/-1}
@media (max-width:700px){.pf-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.pf-zoom{margin:0;position:relative;animation:pf-in .25s ease-out}
@keyframes pf-in{from{opacity:0;transform:translateY(-6px)}}
.pf-zoom img{display:block;width:auto;max-width:100%;height:auto;max-height:84vh;cursor:zoom-out}
.pf-zb{position:absolute;top:10px;right:10px;display:flex;gap:6px}
.pf-zb button{width:38px;height:38px;border:1px solid #000;border-radius:0;background:var(--lehm,#fff);color:#000;font:inherit;font-size:16px;cursor:pointer;padding:0}
.pf-zb button:hover{background:#000;color:var(--lehm,#fff)}
.pf-zoom figcaption{font-size:13px;color:var(--mute);margin-top:6px}
@media (max-width:900px){.fx-t.pf-intro{grid-column:1/-1}.fx-t.pf-more p{columns:1}.pf-g,.pf-r{gap:14px}.pf-r{flex-wrap:wrap}.pf-r figure{flex:calc(var(--r)*3) 1 calc(var(--r)*38vw)}}
.fx-map{grid-column:var(--s)/span 6;display:block;text-decoration:none;border:1px solid var(--fg);background:var(--panel,var(--bg))}
/* a real regional map (OpenStreetMap, in grey) with the studio's geocoded position and a scale drawn to it */
.fx-map .mp{position:relative;display:block;overflow:hidden;line-height:0}
.fx-map .mp img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.05)}
.fx-map .mp svg{position:absolute;left:var(--x);top:var(--y);width:20px;height:26px;transform:translate(-50%,-100%);overflow:visible}
.fx-map .pin{fill:var(--lehm,var(--acc));stroke:#000;stroke-width:1}.fx-map .dot{fill:#000}
.fx-map .sc,.fx-map .os{position:absolute;bottom:6px;font-family:var(--f-m);font-size:10px;line-height:1.2;color:#000;background:rgba(255,255,255,.85);padding:1px 4px}
.fx-map .sc{left:6px;width:var(--w);box-sizing:content-box;padding:0 0 1px;background:none;border:solid #000;border-width:0 1px 1px;text-align:center}
.fx-map .os{right:6px;font-size:9px}
.fx-map>span:last-child{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-top:1px solid var(--fg);font-size:15px}
.fx-map i{font-style:normal;font-size:13px;color:var(--mute)}
.fx-map b{font-family:var(--f-m);font-weight:500;font-size:12px;color:var(--acc)}
@media (max-width:900px){.sn-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 14px;padding-block:32px 120px}.fx-t,.fx-map{grid-column:1/-1}.fx-t{padding-inline:0}.fx-i{grid-column:span 1;margin-top:0}.fx-i[style*="--w:6"],.fx-i[style*="--w:5"]{grid-column:1/-1}}
.sn-pf-grid img{width:100%;margin-bottom:16px;break-inside:avoid}
.sn-jg{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:22px 16px;margin-top:28px}
.sn-jg figure{margin:0}
.sn-jg img{width:100%;aspect-ratio:1;object-fit:cover}
.sn-jg figcaption{font-size:12px;line-height:1.4;color:var(--mute);margin-top:6px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sn-arch-h{margin-bottom:32px}
.sn-sub{color:var(--mute);margin:0 0 20px;max-width:60ch}
.sn-chips{display:flex;flex-wrap:wrap;gap:8px}
.sn-chip{border:1px solid var(--line);background:transparent;border-radius:99px;padding:7px 14px;min-height:40px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.sn-chip span{color:var(--mute);font-size:.85em}
.sn-chip:hover{border-color:var(--fg)}
.sn-chip.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.sn-chip.on span{color:inherit;opacity:.7}

/* detail sheet */
.sn-ov{position:fixed;inset:0;z-index:60}
.sn-ov-bg{position:absolute;inset:0;background:var(--scrim,rgba(20,18,16,.5));animation:snfade .25s}
.sn-ov-p{position:absolute;inset:0 0 0 auto;width:min(1180px,100%);background:var(--panel,var(--bg));color:var(--fg);overflow-y:auto;animation:snslide .35s cubic-bezier(.2,.7,.2,1);padding-top:env(safe-area-inset-top,0px)}
.sn-ov-bar{position:sticky;top:0;display:flex;justify-content:flex-end;gap:8px;padding:14px max(16px,env(safe-area-inset-right,0px)) 14px 16px;z-index:2;pointer-events:none}
.sn-ov-b{pointer-events:auto;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--panel,var(--bg));cursor:pointer;font-size:16px;transition:background .2s,color .2s}
.sn-ov-b:hover{background:var(--fg);color:var(--bg)}
.sn-ov-in{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:40px;padding:4px max(32px,env(safe-area-inset-right,0px)) 80px 40px}
.sn-ov-meta{position:sticky;top:80px;align-self:start;min-width:0}
.sn-ov-n{font-family:var(--f-m);font-size:12px;color:var(--mute);margin:0}
.sn-ov-meta h2{font-family:var(--f-d);font-weight:500;font-size:clamp(26px,2.6vw,36px);line-height:1.08;margin:.3em 0 .6em;text-wrap:balance}
.sn-ov-meta dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0 0 20px;font-size:14px}
.sn-ov-meta dt{font-family:var(--f-m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);padding-top:3px}
.sn-ov-meta dd{margin:0}
.sn-ov-src{font-size:13px;color:var(--mute)}
/* detail text: small, a readable measure, bold headings, links visible; images stay small in justified rows and
   open to full width right where they are when clicked (no second layer) */
.sn-ov-body{min-width:0;max-width:820px}
.sn-ov-body p,.sn-ov-lead{margin:0 0 1em;max-width:62ch;font-size:15px;line-height:1.5}
.sn-ov-body p.sn-cap,.sn-ov-body p.sn-li{font-size:12px;line-height:1.35;color:var(--mute)}
.sn-ov-body a{color:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.sn-ov-body strong{font-weight:700}
.sn-ov-body h3{font-family:var(--f-d);font-weight:700;font-size:16px;line-height:1.25;margin:1.6em 0 .5em}
.sn-ov-body blockquote{margin:0 0 .6em;max-width:62ch;font-family:var(--f-d);font-size:17px;line-height:1.35}
.sn-ov-g{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 26px;--h:170px}
.sn-ov-g.few{--h:300px}
.sn-ov-g::after{content:"";flex:20 1 0}
.sn-ov-g .sn-ov-f{margin:0;min-width:0;flex:var(--r,1.2) 1 calc(var(--r,1.2)*var(--h));transition:flex-basis .25s}
.sn-ov-g .sn-ov-f.big{flex:0 0 100%}
.sn-ov-g img{display:block;width:100%;height:auto;cursor:zoom-in}
.sn-ov-g .big img{cursor:zoom-out;max-height:86vh;object-fit:contain;object-position:left}
.sn-ov-g .sn-ph{aspect-ratio:var(--r,1.2)}
.sn-ov-f figcaption{margin-top:5px;font-size:12px;line-height:1.35;color:var(--mute)}
.sn-ov-f figcaption a{color:inherit}
/* videos: embedded on the real site; where embeds are not possible, a preview that opens the source */
.sn-vid{display:block;position:relative;margin:0 0 18px;aspect-ratio:16/9;background:#000;overflow:hidden;color:#fff}
.sn-vid iframe,.sn-vid video,.sn-vid img{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.sn-ov-body a.sn-vid{text-decoration:none}
button.sn-vid{width:100%;padding:0;border:0;cursor:pointer;font:inherit;text-align:left}
button.sn-vid span{right:10px;width:fit-content}
.sn-vid span{position:absolute;left:10px;bottom:10px;padding:4px 8px;background:var(--lehm,var(--fg));color:var(--bubble-fg,var(--bg));font-size:12px}
.sn-yr{list-style:none;font-family:var(--f-m);font-size:12px;letter-spacing:.12em;color:var(--acc,var(--fg));background:var(--bg);padding:18px 4px 6px;border-bottom:1px solid var(--fg)}
.sn-ov-txt{margin:0 0 36px;padding-bottom:20px;border-bottom:1px solid var(--line)}.sn-ov-f{margin:8px 0 24px}
.sn-ov-f img{width:100%;height:auto}
.sn-ph{display:block;aspect-ratio:4/3;background:var(--line);animation:snpulse 1.2s ease-in-out infinite alternate}
@keyframes snfade{from{opacity:0}}
@keyframes snslide{from{transform:translateX(40px);opacity:0}}
@keyframes snpulse{to{opacity:.5}}

/* cursor peek */
.sn-peek{position:fixed;left:0;top:0;z-index:45;width:min(260px,24vw);pointer-events:none;opacity:0;transition:opacity .2s}
.sn-peek img{width:100%;height:auto;box-shadow:0 18px 44px rgba(0,0,0,.28)}
.sn-peek.on{opacity:1}

/* back link + clay */
.sn-back{position:fixed;left:max(16px,env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:50;display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border-radius:99px;background:var(--fg);color:var(--bg);font-family:var(--f-b);font-size:14px;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.18);transition:transform .2s}
.sn-back:hover{transform:translateY(-2px)}
.sn-clay{position:fixed;right:max(18px,env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:50;display:flex;flex-direction:column;align-items:flex-end;pointer-events:none}
.sn-clay-btn{pointer-events:auto;background:none;border:0;padding:0;cursor:pointer;border-radius:50%;line-height:0}
.sn-clay-g{transform-origin:0 40px;transform-box:view-box}
.sn-clay-g.squish{animation:snsquish .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes snsquish{25%{transform:scale(1.22,.72)}55%{transform:scale(.9,1.12)}}
.sn-clay-say{margin:0 6px 8px 0;max-width:220px;padding:10px 14px;background:var(--bubble,var(--fg));color:var(--bubble-fg,var(--bg));font-family:var(--f-b);font-size:14px;line-height:1.3;border-radius:16px 16px 4px 16px;opacity:0;transform:translateY(6px) scale(.96);transform-origin:100% 100%;transition:opacity .25s,transform .25s}
.sn-clay.talk .sn-clay-say{opacity:1;transform:none}

@media (max-width:820px){
  .sn-profile,.sn-studio,.sn-contact,.sn-ov-in{grid-template-columns:1fr}
  .sn-pf-hero,.sn-ov-meta{position:static}
  .sn-ov-in{padding:0 16px 64px;margin-top:0}
  .sn-clay svg{width:80px;height:80px}
  .sn-peek{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* lecture: artistic projects taught at TU Wien, one row per course */
.sn-lec-h{margin-bottom:clamp(28px,4vw,56px)}
.sn-lec-l{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--fg)}
.sn-lec-r{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,6fr) minmax(0,4fr);gap:8px 22px;padding:14px 0 18px;border-top:1px solid var(--fg)}
.sn-lec-s{font-family:var(--f-m);font-size:13px;color:var(--mute)}
.sn-lec-s i{display:block;font-style:normal;color:var(--acc)}
.sn-lec-m{min-width:0}
.sn-lec-m h2{font-family:var(--f-d);font-weight:600;font-size:clamp(18px,1.8vw,24px);line-height:1.15;margin:0 0 6px}
.sn-lec-m h2 a{text-decoration:none}
.sn-lec-m h2 a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.sn-lec-m p{margin:0;max-width:60ch;font-size:15px;line-height:1.45}
.sn-lec-d{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 12px;margin:0;font-size:13px;line-height:1.35;align-content:start}
.sn-lec-d dt{color:var(--mute)}
.sn-lec-d dd{margin:0}
.sn-lec-d a{text-underline-offset:2px;text-decoration-thickness:1px}
@media (max-width:820px){.sn-lec-r{grid-template-columns:minmax(0,1fr)}}
.sn-lec-sub{color:var(--mute);margin:0;max-width:60ch}
.sn-lec-r[data-id]{cursor:pointer}
.sn-lec-r[data-id]:hover .sn-lec-m h2 a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
/* lecture detail: course list, links out, video link */
.sn-lec-cs{list-style:none;margin:0 0 1em;padding:0;max-width:62ch;font-size:14px;line-height:1.45}
.sn-lec-cs li{padding:3px 0;border-top:1px solid var(--line)}
.sn-lec-ln{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:1.6em 0 0}
.sn-lec-vid a,.sn-lec-ln a{font-size:14px}
.sn-ov-body h3.sn-lec-ch{font-size:14px;line-height:1.3;margin:1.6em 0 .4em}
.sn-lec-areas{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.sn-lec-areas li{border:1px solid var(--fg);padding:2px 9px;font-size:13px}
.sn-ov-meta dd a{text-underline-offset:2px;text-decoration-thickness:1px}
.sn-lec-st{margin:-2px 0 8px;color:var(--mute);font-size:15px}.sn-ov-meta .sn-lec-st{margin:-.4em 0 1em}
.sn-lec-h h1{max-width:none}