* { box-sizing: border-box; margin: 0; padding: 0; }
:root { --sidebar: 380px; --colw: 857px; --panel: #34373c; --content: #3b3e43; --ink: #d4d4d4; --ink-dim: #9a9a9a; }
html, body { height: 100%; }
body { font-family: 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
       background: var(--content); color: var(--ink); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; }
html, body { overflow-x: hidden; }
body { display: block !important; width: 100%; }

/* ---- sidebar ---- */
.sidebar { position: fixed; top: 0; left: 0; width: var(--sidebar); height: 100vh;
           background: var(--panel); display: flex; flex-direction: column; align-items: center;
           justify-content: center; z-index: 20; padding: 46px 20px; }
.brand { font-weight: 300; font-size: 34px; line-height: 1.15; letter-spacing: 0.06em;
         text-transform: uppercase; color: #ededed; text-align: center; margin-top: 8px; }
.sidebar nav { margin-top: 44px; display: flex; flex-direction: column; align-items: center; gap: 26px; width: 100%; }
.sidebar nav a { font-size: 17px; font-weight: 300; letter-spacing: 0.03em; color: var(--ink);
                 transition: color .15s; }
.sidebar nav a:hover { color: #fff; }
.sidebar nav a.current { color: #fff; }

/* ---- content ---- */
.content { margin-left: var(--sidebar); min-height: 100vh; padding: 40px 40px 60px 40px; }

/* ---- gallery (justified rows, sizes computed at build) ---- */
.gallery { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; max-width: 1500px; align-content: flex-start; }
.gallery .tile { position: relative; border: 0; padding: 0; background: none; cursor: zoom-in; line-height: 0; overflow: hidden; flex: 0 0 auto; }
.gallery .tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* hover caption on grid tiles */
.gallery .tile .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 9px;
  font-size: 12px; line-height: 1.3; letter-spacing: .02em; color: #fff; text-align: left;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
  opacity: 0; transition: opacity .2s; pointer-events: none; }
.gallery .tile:hover .cap { opacity: 1; }

/* ---- folder (cover grid) ---- */
.folder { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; max-width: 1500px; }
.folder .cover-title { margin-top: 0; }
.folder .cover { display: block; }
.folder .cover-title { font-size: 26px; font-weight: 300; color: #e8e8e8; margin: 6px 2px 10px; letter-spacing: .01em; }
.folder .cover img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.folder .cover:hover img { opacity: .9; }

/* ---- home hero ---- */
.home .hero { position: fixed; inset: 0; z-index: 1; background-size: cover; background-position: center;
              transition: opacity 1.2s ease; }
.home .sidebar { background: rgba(38,40,44,0.72); backdrop-filter: blur(1px); }

/* ---- lightbox ---- */
.lb { position: fixed; inset: 0; background: #000; z-index: 100; display: none;
      align-items: center; justify-content: center; }
.lb.open { display: flex; }
.lb img { max-width: 100vw; max-height: 100vh; object-fit: contain; }
.lb .x { position: absolute; top: 18px; right: 22px; width: 34px; height: 34px; cursor: pointer;
         opacity: .8; z-index: 3; }
.lb .x:hover { opacity: 1; }
.lb .nav { position: absolute; top: 0; bottom: 0; width: 18%; display: flex; align-items: center; cursor: pointer;
           z-index: 2; opacity: .55; transition: opacity .15s; }
.lb .nav:hover { opacity: 1; }
.lb .prev { left: 0; justify-content: flex-start; padding-left: 26px; }
.lb .next { right: 0; justify-content: flex-end; padding-right: 26px; }
.lb .chev { width: 34px; height: 34px; }
.lb .lbcap { position: absolute; bottom: 22px; left: 28px; max-width: 62%; text-align: left; color: #eee;
             font-size: 15px; letter-spacing: .03em; z-index: 3; }
.lb .count { position: absolute; bottom: 22px; right: 28px; text-align: right; color: #999;
             font-size: 13px; letter-spacing: .05em; z-index: 3; }

@media (max-width: 760px) {
  :root { --sidebar: 0px; }
  .sidebar { position: static; width: 100%; height: auto; flex-direction: column; padding: 26px 16px 18px; }
  .sidebar nav { margin-top: 22px; flex-flow: row wrap; justify-content: center; gap: 14px 20px; }
  .brand { font-size: 26px; }
  .content { margin-left: 0; padding: 20px 12px 48px; }
  .folder { grid-template-columns: 1fr; padding: 16px; gap: 6px 0; }
  .folder .cover-title { font-size: 21px; }
  /* Home: on phones the fullscreen fixed hero traps the user on a slideshow
     with no way into the galleries. Make the nav a solid top menu and drop
     the hero to a bounded banner below it, so the page scrolls normally. */
  .home .sidebar { position: static; background: var(--panel); }
  .home .hero { position: relative; inset: auto; height: 46vh; z-index: 0; }

  /* Galleries: one full-width photo per row on phones (kills the tiny-sliver
     justified pairing — each tile keeps its own aspect ratio). */
  .gallery { gap: 3px; }
  .gallery .tile { width: 100% !important; }
}