@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;700;800&family=Inter:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg:#19191A;
  --bg-raise:#232321;
  --paper:#ECE9E2;
  --ink:#ECE9E2;
  --ink-dim:#96948E;
  --accent:#7FA08C;
  --line:#37363333;
  --line-solid:#3A3936;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  line-height:1.5;
  min-height:100vh;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

/* ---------- header / nav ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:200;
  background:rgba(25,25,26,0.86);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-solid);
}
.nav-row{
  display:flex;
  justify-content:space-evenly;
  align-items:center;
  padding:1.15rem 4vw;
  max-width:1100px;
  margin:0 auto;
}
.nav-link{
  font-family:'JetBrains Mono',monospace;
  font-size:0.76rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink-dim);
  transition:color .25s;
  padding:0.3rem 0.2rem;
}
.nav-link:hover,.nav-link.active{color:var(--accent);}

main{padding-top:64px;}

/* ---------- photo frame (white border) ---------- */
.photo-frame{
  background:var(--paper);
  padding:8px 8px 10px;
  display:block;
  transition:transform .35s ease, box-shadow .35s ease;
}
.photo-frame:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 34px -18px rgba(0,0,0,0.6);
}
.photo-frame .clip{
  overflow:hidden;
  background:#111;
  aspect-ratio:3/2; /* fallback until JS measures the actual image */
}
.photo-frame img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
}
.photo-frame:hover img{transform:scale(1.055);}
.photo-frame .fcode{
  font-family:'JetBrains Mono',monospace;
  font-size:0.62rem;
  letter-spacing:0.06em;
  color:#8B8A83;
  padding-top:6px;
  text-align:right;
}

.ratio-portrait .clip{aspect-ratio:2/3;}
.ratio-landscape .clip{aspect-ratio:3/2;}
.ratio-square .clip{aspect-ratio:1/1;}

/* ---------- floating back-to-top ---------- */
.to-top{
  position:fixed;
  right:2.2rem;
  bottom:2.6rem;
  z-index:150;
  width:46px;height:46px;
  border-radius:50%;
  background:#ffffff;
  border:1px solid var(--line-solid);
  color:#1C1B18;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  box-shadow:0 6px 18px -6px rgba(0,0,0,0.5);
  transition:opacity .3s ease, transform .3s ease;
}
.to-top.show{opacity:1;pointer-events:auto;}
.to-top:hover{transform:translateY(-2px);}
.to-top svg{width:18px;height:18px;}

/* ---------- overlay (photo detail) ---------- */
.overlay{
  position:fixed;inset:0;z-index:300;
  background:rgba(15,15,15,0.96);
  display:flex;align-items:center;justify-content:center;
  padding:4vh 4vw;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
.overlay.show{opacity:1;pointer-events:auto;}
.overlay-inner{
  max-width:min(94vw, 1400px);
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.overlay .photo-frame{
  max-width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  touch-action: pan-y;
}
.overlay .photo-frame .clip{
  width:auto;
  height:auto;
  max-width:92vw;
  max-height:76vh;
  position:relative;
}
.overlay .photo-frame img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
/* Floating caption — a soft scrim over the bottom of the photo itself,
   rather than plain text sitting below it. Hidden entirely when a photo
   has no title or description. */
.overlay-caption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:2.6rem 1.4rem 1.2rem;
  background:linear-gradient(to top, rgba(8,8,8,0.68) 0%, rgba(8,8,8,0.32) 55%, rgba(8,8,8,0) 100%);
  text-align:left;
  pointer-events:none;
  display:none;
}
.overlay-caption.show{display:block;}
.overlay-caption .overlay-title{
  font-family:'Big Shoulders Display',sans-serif;
  font-weight:700;
  font-size:1.25rem;
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:#fff;
  margin:0;
}
.overlay-caption .overlay-desc{
  font-family:'Inter',sans-serif;
  font-size:0.86rem;
  color:rgba(255,255,255,0.78);
  margin:0.3rem 0 0;
  max-width:44ch;
}
/* No hover movement inside the opened photo view — keep it still */
.overlay .photo-frame:hover{
  transform:none;
  box-shadow:none;
}
.overlay .photo-frame:hover img{
  transform:none;
}
.overlay-close{
  position:relative;
  margin-top:1.6rem;
  font-family:'JetBrains Mono',monospace;
  font-size:0.75rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-dim);
  cursor:pointer;
  background:none;
  border:1px solid var(--line-solid);
  padding:0.6rem 1.4rem;
  border-radius:999px;
  z-index:2;
}
.overlay-close:hover{color:var(--accent); border-color:var(--accent);}

/* click-through navigation arrows — span only the image area, not the
   full overlay height, so they never sit on top of the Go Back button */
.overlay-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  height:76vh;
  display:flex;
  align-items:center;
  width:18%;
  min-width:56px;
  background:none;border:none;
  cursor:pointer;
  color:#fff;
  opacity:0.55;
  transition:opacity .2s ease;
  z-index:2;
}
.overlay-nav:hover{opacity:1;}
.overlay-nav svg{width:28px;height:28px;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.6));}
.overlay-nav.prev{left:0; justify-content:flex-start; padding-left:1rem;}
.overlay-nav.next{right:0; justify-content:flex-end; padding-right:1rem;}
.overlay-nav[disabled]{display:none;}

@media(max-width:640px){
  .overlay .photo-frame .clip{max-height:60vh; max-width:94vw;}
  .overlay-nav{width:22%; height:64vh;}
  .overlay-nav svg{width:24px;height:24px;}
  .overlay-close{margin-top:1.2rem;}
}

@media (prefers-reduced-motion: reduce){
  .photo-frame, .photo-frame img, .to-top, .overlay{transition:none;}
}
a:focus-visible, button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}