@font-face{font-family:Figtree;font-weight:400;font-display:swap;src:url(fonts/figtree-latin-400.woff2) format("woff2")}
@font-face{font-family:Figtree;font-weight:500;font-display:swap;src:url(fonts/figtree-latin-500.woff2) format("woff2")}
@font-face{font-family:Figtree;font-weight:700;font-display:swap;src:url(fonts/figtree-latin-700.woff2) format("woff2")}
@font-face{font-family:Figtree;font-weight:400;font-display:swap;src:url(fonts/figtree-latin-ext-400.woff2) format("woff2");unicode-range:U+0100-02BA,U+1E00-1EFF,U+20A0-20C0}
@font-face{font-family:Figtree;font-weight:500;font-display:swap;src:url(fonts/figtree-latin-ext-500.woff2) format("woff2");unicode-range:U+0100-02BA,U+1E00-1EFF,U+20A0-20C0}
@font-face{font-family:Figtree;font-weight:700;font-display:swap;src:url(fonts/figtree-latin-ext-700.woff2) format("woff2");unicode-range:U+0100-02BA,U+1E00-1EFF,U+20A0-20C0}

:root{
  --body:proxima-nova,Figtree,"Helvetica Neue",Arial,sans-serif;
  --nav:gaultier,Figtree,"Helvetica Neue",Arial,sans-serif;
  --ink:#121212;
  --text:#666;
  --link:#000;
  --nav-ink:#1f1f1f;
  --nav-active:#c9c9c9;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--text);font:400 14px/1.6 var(--body);letter-spacing:.02em;-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none}
button{all:unset;cursor:pointer}
button:focus-visible,a:focus-visible{outline:1px solid var(--ink);outline-offset:2px}

/* Sidebar */
.side{position:fixed;top:50px;left:50px;width:95px;z-index:20;text-align:center}
.site-title{display:block;margin:7px 0 0;font:700 10px/12px var(--body);letter-spacing:normal;color:var(--ink);white-space:nowrap}
.site-title a{color:inherit}
.main-nav{margin-top:33px}
.main-nav a{display:block;padding:2.2px;font:500 11px/17.6px var(--nav);letter-spacing:normal;color:var(--nav-ink)}
.main-nav a[aria-current=page]{color:var(--nav-active)}
.menu-toggle{display:none}

/* Works */
.gallery{position:relative;margin:40px 50px 10px 205px;display:grid;grid-template-columns:repeat(auto-fill,minmax(222px,1fr));gap:10px}
.gallery.laid{display:block}
.gallery.laid .thumb{position:absolute;top:0;left:0}
.thumb{display:block;line-height:0;cursor:pointer}
.thumb img{display:block;width:100%;height:auto}

/* Slide view */
.viewer[hidden]{display:none}
.viewer{position:fixed;inset:0;z-index:10;background:#fff}
.stage{position:absolute;top:40px;right:40px;bottom:40px;left:195px}
.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .25s ease}
.stage img.on{opacity:1}
.zone{position:absolute;top:0;bottom:0}
.zone-prev{left:0;width:40%;cursor:w-resize}
.zone-grid{left:40%;width:20%;cursor:n-resize}
.zone-next{right:0;width:40%;cursor:e-resize}
.meta{position:absolute;left:50px;bottom:50px;width:95px;z-index:1}
.meta-title{color:var(--ink);min-height:22.4px}
.meta-controls{margin-top:13px;height:29px;font-size:12px;line-height:17px;letter-spacing:.02em;color:#222;text-transform:uppercase;white-space:nowrap}
.meta-controls button+button{margin-left:11px}
.meta-toggle{display:block;margin-top:15px;font-size:12px;line-height:16px;color:var(--text)}

/* Info */
.info{margin:168px 50px 0 215px}
.info p{margin:0 0 14px}
.info .links{margin:0 0 34px}
.info .ig{display:block;width:16px;height:16px;color:#000}
.info .ig svg{display:block;width:100%;height:100%;fill:currentColor}

/* Mobile */
@media (max-width:800px){
  .side{position:static;width:auto;padding:15px 20px 0;display:flex;flex-direction:column}
  .menu-toggle{display:block;order:1;align-self:center;margin-top:15px;height:49px;font-size:11px;line-height:22.4px;color:var(--text)}
  .site-title{order:2;margin:7px 0 0;align-self:center}
  .main-nav{order:0;display:none;margin:-15px -20px 0;padding:28px 0}
  .main-nav.open{display:block}
  .main-nav a{padding:0;font-size:18px;line-height:52px}
  .gallery,.gallery.laid{display:block;height:auto!important;margin:57px 20px 0}
  .gallery.laid .thumb,.thumb{position:static;width:100%!important;margin-bottom:20px;transform:none!important;cursor:default}
  .info{margin:192px 20px 0}
}