* { margin: 0; padding: 0; box-sizing: border-box; }

:root{
  --ui-fade-ms:260ms;
  --top-pad:14px;
  --side-pad:14px;
}

/* Header / footer logo */
.site-header{
  position:fixed; top:var(--top-pad); left:50%;
  transform:translateX(-50%);
  z-index:50;
  pointer-events:none;
  transition:opacity var(--ui-fade-ms) ease, transform var(--ui-fade-ms) ease;
}
.site-header .brand{ pointer-events:auto; display:inline-flex; align-items:center; justify-content:center; }
.site-header img{ height:66px; width:auto; display:block; opacity:.95; }

.brand-footer{
  position:fixed; left:50%; bottom:16px;
  transform:translateX(-50%);
  z-index:5;
  pointer-events:none;
  opacity:0;
  transition:opacity var(--ui-fade-ms) ease;
}
.brand-footer img{ height:18px; width:auto; display:block; opacity:.12; filter:saturate(0); }

.is-engaged .site-header{ opacity:0; transform:translateX(-50%) translateY(-6px); }
.is-engaged .brand-footer{ opacity:1; }

/* Index grid */
.thumbs-page{ font-family: Helvetica, Arial, sans-serif; background:#fff; color:#111; }
.thumbs-header{ position:fixed; top:0; left:0; z-index:20; padding:var(--top-pad) var(--side-pad); pointer-events:none; }
.thumbs-title{ font-size:14px; letter-spacing:.06em; text-transform:uppercase; }
.thumbs-subtitle{ margin-top:4px; font-size:12px; color:rgba(0,0,0,.6); }

.thumbs-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; width:100%; }
@media (min-width:900px){ .thumbs-grid{ grid-template-columns:repeat(8,1fr);} }

.thumb{ display:block; overflow:hidden; }
.thumb img{ width:100%; height:100%; display:block; object-fit:cover; aspect-ratio:4/5; }

/* Viewer */
.viewer-page{ font-family: Helvetica, Arial, sans-serif; background:#fff; overflow:hidden; }

#slideshow{ position:relative; width:100%; height:100vh; }
@supports (height:100dvh){ #slideshow{ height:100dvh; } }

.close{
  position:fixed; top:var(--top-pad); right:var(--side-pad);
  z-index:70;
  text-decoration:none;
  font-size:30px;
  line-height:1;
  color:rgba(0,0,0,.50);
  padding:8px 10px;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.close:hover{ color:rgba(0,0,0,.9); }

/* Shone-style: native horizontal scroll + snap */
.slide-viewport{
  width:100%; height:100vh;
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  touch-action:pan-x;
}
@supports (height:100dvh){ .slide-viewport{ height:100dvh; } }

.slide-strip{ display:flex; height:100vh; }
@supports (height:100dvh){ .slide-strip{ height:100dvh; } }

.slide{
  flex:0 0 100vw;
  width:100vw; height:100vh;
  display:grid; place-items:center;
  scroll-snap-align:center;
  scroll-snap-stop:always;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  transform:translateZ(0);
}
@supports (height:100dvh){ .slide{ height:100dvh; } }

.slide img{
  max-width:100vw; max-height:100vh;
  width:auto; height:auto;
  object-fit:contain;
  display:block;
}
@supports (height:100dvh){ .slide img{ max-height:100dvh; } }

/* Arrows (unchanged) */
.arrow{
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  z-index:60;
  background:none;
  border:none;
  font-size:54px;
  line-height:1;
  padding:10px 14px;
  cursor:pointer;
  user-select:none;
  color:rgba(0,0,0,.22);
  -webkit-tap-highlight-color:transparent;
}
.arrow:hover{ color:rgba(0,0,0,.55); }
.arrow.left{ left:10px; }
.arrow.right{ right:10px; }

/* Counter */
#counter{
  position:fixed;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  z-index:60;
  font-size:12px;
  letter-spacing:.08em;
  color:rgba(0,0,0,.42);
  user-select:none;
}
/* Hide scrollbars (Phoebe-clean) */
.slide-viewport {
  scrollbar-width: none; /* Firefox */
}
.slide-viewport::-webkit-scrollbar {
  display: none; /* iOS/Chrome */
}