@font-face{font-family:"Archivo";src:url(../fonts/archivo-var.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(../fonts/bodoni-moda-latin.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}

:root{
  --bg:#FFFFFF; --ink:#16161A; --ink-2:#6A6A72; --ink-3:#74747D; --shade:#F2F2F0;
  --serif:"Bodoni Moda",Didot,"Times New Roman",serif;
  --sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --side:clamp(196px,20vw,292px);
  --gap:clamp(6px,.7vw,11px);
  --pad:clamp(18px,3vw,40px);
  color-scheme:light;
}
*{box-sizing:border-box}
/* The wall is hidden with the hidden attribute when About or Contact opens,
   but the phone rule below sets .wall{display:block}, and an author rule beats
   the browser's own [hidden]{display:none}. Without this the wall stayed put
   on phones and the text landed 24,000px below the fold. */
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
a{color:inherit}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* sidebar */
.side{position:fixed;top:0;left:0;bottom:0;width:var(--side);z-index:40;display:flex;flex-direction:column;
  padding:var(--pad) 0 var(--pad) var(--pad);background:var(--bg);
  opacity:0;animation:sideIn .9s cubic-bezier(.2,.7,.3,1) .1s forwards}
@keyframes sideIn{to{opacity:1}}
.mark{font-family:var(--serif);font-weight:400;font-size:clamp(1.28rem,1.85vw,1.72rem);line-height:1.12;
  text-transform:uppercase;letter-spacing:.32em;margin:0 0 clamp(26px,3.4vw,46px);
  animation:markSettle 1.5s cubic-bezier(.16,.8,.3,1) .15s both}
@keyframes markSettle{from{letter-spacing:.62em;opacity:0}to{letter-spacing:.06em;opacity:1}}
.mark a{text-decoration:none;display:block}
.mark span{display:block}
.nav{display:flex;flex-direction:column;align-items:flex-start;gap:.34em}
.nav button{position:relative;font-size:clamp(.95rem,1.15vw,1.08rem);font-weight:500;color:var(--ink);padding:1px 0;transition:color .35s}
.nav button::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .42s cubic-bezier(.2,.7,.3,1)}
.nav button:hover::after{transform:scaleX(1)}
.nav button[aria-current="true"]{color:var(--ink-3)}
.nav button[aria-current="true"]::after{transform:scaleX(0)}
.nav--sub{margin-top:clamp(20px,2.6vw,34px);gap:.2em}
.nav--sub button{font-size:.88rem;font-weight:400;color:var(--ink-2)}
.nav--sub button:hover{color:var(--ink)}
/* The copyright line lives at the foot of the page, not beside the work:
   in the sidebar it crowded the navigation for no reason. */
.foot{margin-left:var(--side);padding:clamp(28px,4vw,52px) var(--pad) clamp(34px,5vw,64px) 0;
  font-size:.76rem;letter-spacing:.06em;color:var(--ink-3)}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink)}

/* wall */
.main{margin-left:var(--side);padding:var(--pad) var(--pad) clamp(60px,9vw,130px) 0}
.wall{columns:2;column-gap:var(--gap)}
.wall.swap{opacity:0;transition:opacity .16s}
.cell{break-inside:avoid;margin:0 0 var(--gap);position:relative;display:block;width:100%;
  opacity:0;transform:translateY(16px)}
.cell.in{opacity:1;transform:none;transition:opacity .95s ease,transform 1.05s cubic-bezier(.2,.7,.3,1)}
.cell button{display:block;width:100%;position:relative;overflow:hidden;background:var(--shade)}
.cell picture{display:block}
.cell img{width:100%;height:auto;background:var(--shade);filter:brightness(.965);transition:filter .6s,transform 1.1s cubic-bezier(.2,.7,.3,1)}
.cell button:hover img{filter:brightness(1);transform:scale(1.012)}

/* text pages */
.page{display:none;max-width:62ch;padding-block:clamp(10px,2vw,26px)}
.page.on{display:block;animation:pageIn .7s cubic-bezier(.2,.7,.3,1) both}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.page h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.6vw,2.2rem);margin:0 0 .7em;letter-spacing:.02em}
.page p{margin:0 0 1.1em;color:var(--ink-2);font-size:1.02rem;line-height:1.75}
.page p:first-of-type{color:var(--ink)}
.page a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink-3);padding-bottom:1px}
.page a:hover{border-bottom-color:var(--ink)}
.page dl{display:grid;grid-template-columns:auto 1fr;gap:.35em 1.6em;margin:1.6em 0 0;font-size:.9rem}
.page dt{color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase;font-size:.72rem;padding-top:.28em}
.page dd{margin:0}

/* lightbox */
.lb{position:fixed;inset:0;z-index:90;background:#fff;display:none}
.lb.on{display:block;animation:lbIn .38s ease}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb__stage{position:absolute;inset:clamp(44px,6vh,72px) clamp(16px,4vw,72px)}
.lb__stage img{position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  animation:imgIn .5s cubic-bezier(.2,.7,.3,1)}
@keyframes imgIn{from{opacity:0;transform:scale(.982)}to{opacity:1;transform:none}}
.lb__b{position:absolute;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 clamp(16px,4vw,72px)}
.lb__t{top:clamp(14px,2.4vh,26px)}
.lb__bo{bottom:clamp(14px,2.4vh,26px);flex-wrap:wrap}
.lb__b span,.lb__b button{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.lb__b span b{font-weight:500;color:var(--ink)}
.lb__x{padding:12px 6px;margin:-12px -6px}
.lb__x:hover{color:var(--ink)}
.lb__arrow{position:absolute;top:clamp(44px,6vh,72px);bottom:clamp(44px,6vh,72px);width:26%;z-index:3;opacity:0;transition:opacity .3s}
.lb__arrow span{position:absolute;top:50%;transform:translateY(-50%);font-size:1.5rem;line-height:1;color:var(--ink)}
.lb__arrow.prev{left:0;cursor:w-resize}.lb__arrow.prev span{left:clamp(10px,2.4vw,30px)}
.lb__arrow.next{right:0;cursor:e-resize}.lb__arrow.next span{right:clamp(10px,2.4vw,30px)}
.lb:hover .lb__arrow{opacity:.5}
.lb__arrow:hover{opacity:1}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--bg);color:var(--ink);
  padding:10px 16px;font-size:.88rem;text-decoration:none;outline:1px solid var(--ink)}
.skip:focus{left:0}
.back-link{font-size:.88rem;color:var(--ink-2);text-decoration:none;transition:color .35s}
.back-link:hover{color:var(--ink)}
.page h3{font-family:var(--sans);font-weight:500;font-size:1.15rem;margin:1.4em 0 .5em;color:var(--ink)}
.page .fineprint{margin-top:2em;font-size:.85rem;color:var(--ink-3)}

@media print{
  .side{position:static;width:auto;animation:none;opacity:1}
  .mark{animation:none;letter-spacing:.06em}
  .main{margin-left:0;padding:0}
  .wall{columns:1}
  .cell{opacity:1;transform:none;break-inside:avoid;margin-bottom:12px}
  .lb,.skip{display:none!important}
}
@media (prefers-reduced-motion:reduce){
  .cell,.cell.in{opacity:1;transform:none;transition:none}
  .side,.mark{animation:none;opacity:1;letter-spacing:.06em}
  .cell button:hover img{transform:none}
  .lb.on,.lb__stage img{animation:none;opacity:1}
}
/* Tablets, and phones held sideways. No room for a fixed sidebar, but plenty
   for the two columns: a regular iPad and anything larger gets the wall. */
@media (max-width:1023px){
  .foot{margin-left:0;padding-left:var(--pad)}
  .side{position:static;width:auto;height:auto;padding:var(--pad) var(--pad) 0}
  .mark{margin-bottom:20px}
  .nav{flex-flow:row wrap;gap:.5em 1.15em}
  .nav--sub{margin-top:14px;gap:.5em 1.15em}
    .main{margin-left:0;padding:10px var(--pad) 60px}
  .lb__arrow{opacity:.45}
}
/* Phones, the iPad mini, foldables and duos: one column, edge to edge. Most of
   the traffic here arrives from Instagram, so this is the layout that matters. */
@media (max-width:759px){
  .wall{columns:auto;column-gap:normal;display:block}
  .main{padding:6px var(--pad) 60px}
}
/* Tablets have the width for a single-row header, so the wordmark sits inline
   with the navigation instead of stacking and eating the top of the wall. */
@media (min-width:760px) and (max-width:1023px){
  .side{flex-flow:row wrap;align-items:baseline;gap:0 clamp(16px,2.6vw,34px)}
  .mark{margin:0;font-size:1.15rem;letter-spacing:.22em}
  .mark a,.mark span{display:inline}
  .nav--sub{margin-top:0}
}
/* A phone held sideways has about 390px of height to spend. The header must
   not eat it, so the wordmark goes inline and shares a row with the nav. */
@media (max-width:1023px) and (max-height:560px){
  .side{flex-flow:row wrap;align-items:baseline;gap:0 clamp(14px,2.4vw,30px);padding-bottom:4px}
  .mark{margin:0;font-size:1.02rem;letter-spacing:.2em}
  .mark a,.mark span{display:inline}
  .nav--sub{margin-top:0}
  .main{padding-top:4px}
}