@font-face{font-family:'Source Sans 3';src:url('/fonts/SourceSans3-Latin.woff2') format('woff2');font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('/fonts/SourceSans3-Arrows.woff2') format('woff2');font-weight:200 900;font-style:normal;font-display:swap;unicode-range:U+2190-2193}
:root{color-scheme:light;font-family:'Source Sans 3',Arial,Helvetica,sans-serif;font-size:var(--base-size,1.44vh);color:rgba(0,0,0,.6);background:#fff;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;font-weight:350;line-height:1.2;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:none}
a{color:inherit;text-decoration:none}
a:active{opacity:.7}
button{font:inherit}
b,strong{font-weight:500}
.sidebar{position:fixed;z-index:5;top:0;left:0;width:15%;padding:.75rem;line-height:1.2;background:white}
.identity{display:block;width:max-content;max-width:100%;margin-bottom:1.2rem}
.identity strong,.identity span{display:block}
.identity .mobile-identity{display:none}
.sidebar nav{display:flex;flex-direction:column;align-items:flex-start;line-height:1.4}
.sidebar nav a{display:block;white-space:nowrap}
.sidebar nav a.active{color:#f00}
.arrow,.nav-arrow,.lightbox-prev,.lightbox-next{font-family:'Source Sans 3',sans-serif;font-weight:350}
.nav-arrow{display:inline-block;width:1rem}
.main{width:82%;margin-left:18%;padding:.75rem;min-height:100vh}
.home-grid{width:100%}
.home-row{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1rem}
.home-row .media-card{min-width:0;flex:var(--ratio) 1 0;max-width:calc(var(--ratio)*45%)}
.home-row img{display:block;width:100%;height:auto;aspect-ratio:var(--ratio)}
.media-card{display:flex;flex-direction:column;margin:0;min-width:0;vertical-align:bottom}
.media-card>a{display:block}
.media-card img,.media-card video{display:block;width:100%;height:auto}
.media-card.zoomable img{cursor:zoom-in}
.caption{display:block;margin-top:.5em;font-size:.75rem;line-height:1;color:rgba(0,0,0,.75);font-weight:350;letter-spacing:0}
.home-row .caption,.gallery-grid .caption,.gallery-columnized .caption{margin-bottom:2em}
.column-set{display:flex;gap:var(--gutter,1rem);align-items:stretch;width:100%}
.column-unit{flex:var(--span) 1 0;min-width:0;flex-basis:calc((100% + var(--gutter,1rem))*var(--span)/12 - var(--gutter,1rem))}
.column-set+.column-set{margin-top:1rem}
.column-set+.gallery-grid,.column-set+.gallery-columnized{margin-top:1rem}
.gallery-grid,.gallery-columnized{display:grid;grid-template-columns:repeat(var(--columns,2),minmax(0,1fr));gap:1rem;align-items:start}
.gallery-grid>.media-card{grid-column:span var(--grid-span,1)}
.gallery-grid>[data-align="bottom"]{align-self:end}
.gallery-columnized{position:relative;display:block}
.gallery-columnized>.media-card{position:absolute;left:var(--left,0);top:var(--top,0);width:var(--width,100%)}
h2{font-size:1.4rem;font-weight:500;line-height:1.3;letter-spacing:.01em;margin:0;color:rgba(0,0,0,.7)}
.project-nav{display:flex;gap:.75rem;padding:1.5rem 0 .75rem}
.page-project>.media-card{display:inline-flex;flex-direction:column;width:100%}
.lightbox[hidden]{display:none}
.lightbox{position:fixed;z-index:20;inset:0;display:flex;align-items:center;justify-content:center;background:#fff;padding:3rem}
.lightbox img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.lightbox button{position:absolute;border:0;background:rgba(87,87,87,.35);color:rgba(255,255,255,.9);cursor:pointer;font-size:22px;width:30px;height:30px;border-radius:50%}
.lightbox-close{top:20px;right:20px}.lightbox-prev{left:20px}.lightbox-next{right:20px}
html.mobile{font-size:calc(var(--base-size)*1.55)}
.mobile .sidebar{width:100%;padding:.5625rem}
.mobile .identity .desktop-identity{display:none}
.mobile .identity .mobile-identity{display:block}
.mobile .sidebar nav{line-height:1.2}
.mobile .main{width:100%;margin-left:0;padding:.5625rem;padding-top:calc(var(--navigation-height,6rem) + .5625rem)}
.mobile .home-row{display:contents}
.mobile .home-row .media-card{width:min(100%,calc(var(--ratio)*110%));max-width:100%;margin-bottom:.75rem}
.mobile .column-set{display:block}
.mobile .column-unit.is-empty{display:none}
.mobile .column-unit:not(.is-empty)~.column-unit:not(.is-empty){margin-top:1.5rem}
.mobile .column-set+.column-set,.mobile .column-set+.gallery-grid,.mobile .column-set+.gallery-columnized{margin-top:.75rem}
.mobile .gallery-grid{gap:.75rem}
.mobile .gallery-columnized{gap:1.5rem}
.mobile .lightbox{padding:10px}
.mobile .lightbox-prev{left:25px}.mobile .lightbox-next{right:25px}
.page-project h2{font-size:1rem;font-weight:500}
