@font-face{font-family:'Obj.s01';src:url('/fonts/Obj.s01-Regular.woff2?v=4') format('woff2'),url('/fonts/Obj.s01-Regular.woff?v=4') format('woff');font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --ink:#2E2E2E; --muted:#2E2E2E; --line:rgba(0,0,0,.14);
  --row:14px; --row-lh:1.25; --h1:40px; --meta:12px; --base:15px;
  --pad:32px; --cw:clamp(260px,26vw,380px); --cwo:clamp(200px,17vw,260px); /* column width while the drawer is open */ --ease:cubic-bezier(.22,.61,.36,1);
  --bg:#E4E4E4;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:'Obj.s01','Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:500;font-size:var(--base);line-height:1.45;color:var(--ink);background:#fff;overflow:hidden}
a{color:inherit;text-decoration:none;border:0}
h1,h2,p,ul{margin:0;padding:0;list-style:none}
.meta{font-size:var(--meta);line-height:1.45;color:var(--muted)}

#app{position:fixed;inset:0;overflow:hidden;background:var(--bg);transition:background-color .5s ease}
.cols{position:absolute;inset:0;z-index:1;display:flex;transition:transform .5s var(--ease)}
.col{position:relative;height:100%;overflow-y:auto;overflow-x:hidden;flex:none;padding:var(--pad) 0;transition:background-color .35s ease,width .5s var(--ease)}
.col::-webkit-scrollbar{width:0}
.c1{width:var(--cw)}
.c2{width:var(--cw);border-left:1px solid var(--line)}
.c3{width:calc(100vw - 2 * var(--cw));min-width:var(--cw);border-left:1px solid var(--line)}
#app.open .cols{transform:translateX(calc(-1 * var(--cw)))}
#app.open .c2,#app.open .c3{width:var(--cwo);min-width:0}

/* column heads and rows */
.head{padding:0 var(--pad) 28px;min-height:64px}
.wordmark{font-size:var(--meta);letter-spacing:0;line-height:1.3}
.wordmark span{display:block;color:var(--muted)}
.back{display:none}
.row{position:relative;z-index:1;display:block;padding:10px var(--pad) 12px;font-size:var(--row);line-height:var(--row-lh);transition:background-color .2s,color .25s}
.row .m{display:block;margin-top:4px;font-size:var(--meta);line-height:1.35;color:var(--muted);transition:color .25s}
.row.has::after{content:'';position:absolute;right:calc(var(--pad) + 2px);top:15px;width:6px;height:6px;border:solid var(--muted);border-width:2px 2px 0 0;transform:rotate(45deg)}
.row:hover,.row:focus-visible{background:rgba(0,0,0,.06);outline:none}
.row[aria-current="true"]{background:rgba(0,0,0,.1)}
.c1 .row,.c2 .row{font-size:var(--row)}
.c2 .row .m{display:inline;margin:0 0 0 8px;font-size:var(--meta)}

/* about */
.about{padding:0 var(--pad);max-width:560px}
.about p{font-size:var(--row);line-height:1.4;margin-bottom:1em}
.about p.meta{font-size:var(--meta);line-height:1.45}
.about .links{margin-top:2em}
.about .links a{border-bottom:1px solid #8A8A8A}

/* projects: image behind the text link, covering the whole browser window */
.bgs{position:absolute;inset:0;z-index:0;pointer-events:none}
.bgs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease}
.bgs img.on{opacity:1}
.bgs::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.4);opacity:0;transition:opacity .35s}
#app.hovering .bgs::after{opacity:1}
#app.hovering .c3,#app.is-about .c3{background:transparent}
#app.hovering .col,#app.hovering .col .row,#app.hovering .col .row .m,#app.hovering .wordmark span{color:#fff}
#app.hovering .col .row{text-shadow:0 0 14px rgba(0,0,0,.35)}
#app.hovering .col{border-color:rgba(255,255,255,.25)}
#app.hovering .row:hover,#app.hovering .row:focus-visible{background:rgba(255,255,255,.12)}
#app.hovering .row.has::after{border-color:#fff}
.c3 .empty{padding:0 var(--pad)}

/* drawer */
#drawer{position:absolute;top:0;right:0;bottom:0;width:calc(100vw - 2 * var(--cwo));background:#fff;border-left:1px solid var(--line);transform:translateX(102%);transition:transform .5s var(--ease);overflow-y:auto;z-index:5}
#app.open #drawer{transform:none}
#drawer .inner{padding:var(--pad) calc(var(--pad) * 1.5)}
.close{display:inline-block;margin-bottom:28px;font-size:var(--meta);border-bottom:1px solid #8A8A8A;cursor:pointer}
.close:hover{border-bottom-color:#000}
#drawer h1{font-size:var(--h1);line-height:1.05;font-weight:500;margin-bottom:12px}
#drawer .facts{margin-bottom:28px}
#drawer .copy p{font-size:18px;line-height:1.45;margin-bottom:1em;max-width:62ch}
#drawer .gal{margin-top:32px;display:grid;gap:16px}
#drawer .gal img{display:block;width:100%;height:auto;background:#f1f1f1}

/* narrow screens: one column at a time, like drilling into folders */
@media (max-width:800px){
  :root{--cw:100vw;--cwo:100vw;--pad:20px;--h1:30px}
  .c1,.c2,.c3,#app.open .c3{width:100vw}
  .cols{width:300vw}
  #app[data-depth="2"] .cols{transform:translateX(-100vw)}
  #app[data-depth="3"] .cols{transform:translateX(-200vw)}
  #app.open .cols{transform:translateX(-200vw)}
  #drawer{width:100vw;border-left:0}
  .back{display:inline-block;margin-bottom:16px;font-size:var(--meta);border-bottom:1px solid #8A8A8A}
  .bgs{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}