*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --paper:#f4efe0;
  --paper2:#ede8d5;
  --dark:#1a1612;
  --dim:#2a2a2a;
  --red:#cc1a1a;
}
html,body{height:100%;overflow:hidden}
body{
  background:var(--paper);
  color:var(--dark);
  font-family:'Space Mono',monospace;
}

/* nav */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(244,239,224,.95);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(26,22,18,.15);
  padding:.75rem 2rem;
  display:flex;justify-content:space-between;align-items:center;
}
.nav-brand a{
  font-family:'JetBrains Mono',monospace;
  font-size:1rem;color:var(--dark);text-decoration:none;
}
.nav-brand a span{color:var(--dim)}
.nav-links a{
  font-family:'JetBrains Mono',monospace;
  font-size:.85rem;text-transform:uppercase;letter-spacing:2px;
  color:var(--dim);text-decoration:none;
  transition:color .2s;
}
.nav-links a:hover{color:var(--dark)}

/* canvas */
#canvas-wrap{
  position:fixed;inset:0;top:50px;
  overflow:hidden;
  cursor:grab;
  background:
    radial-gradient(circle,rgba(26,22,18,.06) 1px,transparent 1px);
  background-size:32px 32px;
}
#canvas-wrap:active{cursor:grabbing}
#canvas-world{
  position:absolute;
  transform-origin:0 0;
  width:100%;height:100%;
}

/* hint */
#canvas-hint{
  position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);
  font-family:'JetBrains Mono',monospace;
  font-size:.7rem;text-transform:uppercase;letter-spacing:2px;
  color:rgba(26,22,18,.3);
  pointer-events:none;z-index:50;
  background:rgba(244,239,224,.8);padding:.4rem 1rem;
  border:1px solid rgba(26,22,18,.1);
}

/* photos */
.photo-item{
  position:absolute;
  cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease;
  border:2px solid var(--dark);
  overflow:hidden;
  background:var(--paper2);
}
.photo-item:hover{
  transform:scale(1.05) !important;
  box-shadow:4px 6px 0 rgba(26,22,18,.2);
  z-index:10;
}
.photo-item img{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
}
.photo-item .photo-label{
  position:absolute;bottom:0;left:0;right:0;
  font-family:'JetBrains Mono',monospace;
  font-size:.6rem;text-transform:uppercase;letter-spacing:1px;
  padding:.25rem .5rem;
  background:rgba(26,22,18,.8);
  color:var(--paper);
  opacity:0;
  transition:opacity .2s;
}
.photo-item:hover .photo-label{opacity:1}

/* tape decoration on random photos */
.photo-item::before{
  content:'';position:absolute;top:-4px;left:30%;
  background:rgba(255,255,180,.55);
  border-top:1px solid rgba(200,180,0,.35);
  border-bottom:1px solid rgba(200,180,0,.35);
  height:10px;width:50px;
  transform:rotate(-2deg);
  pointer-events:none;z-index:5;
  opacity:0;
  transition:opacity .2s;
}
.photo-item:hover::before{opacity:1}

/* photo card overlay */
#photo-overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(26,22,18,.88);
  backdrop-filter:blur(4px);
  display:none;
  justify-content:center;align-items:center;
  padding:2rem;
  cursor:pointer;
}
#photo-overlay.open{display:flex}
#photo-card{
  position:relative;
  max-width:90vw;max-height:85vh;
  background:var(--paper);
  border:2px solid var(--dark);
  box-shadow:6px 8px 0 rgba(26,22,18,.25);
  cursor:default;
  animation:cardPop .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes cardPop{
  0%{opacity:0;transform:scale(.9) rotate(-1deg)}
  100%{opacity:1;transform:scale(1) rotate(0deg)}
}
#photo-card img{
  display:block;
  max-width:90vw;max-height:85vh;
  object-fit:contain;
}
#photo-card-close{
  position:absolute;top:.5rem;right:.5rem;z-index:10;
  background:var(--paper);border:1.5px solid var(--dark);
  width:32px;height:32px;font-size:1rem;cursor:pointer;
  color:var(--dark);transition:all .18s;
  display:flex;align-items:center;justify-content:center;
}
#photo-card-close:hover{color:var(--red);border-color:var(--red)}

/* tape on card */
#photo-card::before{
  content:'';position:absolute;top:-6px;left:38px;
  background:rgba(255,255,180,.55);
  border-top:1px solid rgba(200,180,0,.35);
  border-bottom:1px solid rgba(200,180,0,.35);
  height:13px;width:65px;
  transform:rotate(-2deg);pointer-events:none;z-index:10;
}