:root {
  --bg: #060606;
  --ink: #8a8a86;
  --ink-dim: #4a4a47;
  /* as tall as possible while always clearing the masthead (top) and
     counter / hint / scramble line (bottom) */
  --img-h: min(92vh, calc(100vh - 150px));
  --img-h: min(92dvh, calc(100dvh - 150px));
  --gutter: 24px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html, body {
  height:100%; background:var(--bg); overflow:hidden;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  overscroll-behavior:none;
}

.strip {
  height:100vh; height:100dvh;
  display:flex;
  align-items:center;
  gap:var(--gutter);
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  cursor:grab;
  touch-action:pan-x;
  -webkit-overflow-scrolling:touch;
}
.strip::-webkit-scrollbar { display:none; }
.strip { position:relative; }
.meta {
  position:absolute;
  left:32px;
  bottom:calc(env(safe-area-inset-bottom, 0px) + 52px);
  display:flex; flex-direction:column; gap:8px;
  z-index:5;
}
@media (max-width: 720px) {
  .meta { left:20px; }
}
.meta a {
  color:var(--ink); font-size:11px; letter-spacing:.32em;
  font-weight:400; text-decoration:none;
  padding:4px 8px 4px 0;
}
.meta a:hover, .meta a:focus-visible { color:#e8e8e4; outline:none; }
.strip.dragging { cursor:grabbing; }

.lead { flex:0 0 auto; width:20vw; }
.tail { flex:0 0 auto; width:24vw; }

figure { flex:0 0 auto; height:var(--img-h); cursor:pointer; }
.strip.dragging figure { cursor:grabbing; }
figure img {
  height:100%; width:auto; display:block;
  user-select:none; -webkit-user-select:none; -webkit-user-drag:none;
}

header {
  position:fixed; top:calc(env(safe-area-inset-top, 0px) + 24px); left:32px; z-index:30;
  mix-blend-mode:difference;
}
header a {
  color:var(--ink); font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; font-weight:400;
  text-decoration:none; cursor:pointer;
  padding:10px 10px 10px 0; margin:-10px -10px -10px 0;
}
header a:hover, header a:focus-visible {
  color:#e8e8e4; outline:none;
}
.counter {
  position:fixed; bottom:calc(env(safe-area-inset-bottom, 0px) + 22px); left:32px; z-index:10;
  color:var(--ink-dim); font-size:11px; letter-spacing:.22em;
  font-variant-numeric:tabular-nums;
  pointer-events:none;
}
.scramble {
  position:fixed; bottom:calc(env(safe-area-inset-bottom, 0px) + 22px); right:32px; z-index:10;
  border:0; background:transparent; padding:6px 0 6px 12px; cursor:pointer;
  color:var(--ink-dim); font-size:11px; letter-spacing:.22em;
  font-family:inherit;
}
.scramble:hover, .scramble:focus-visible { color:var(--ink); outline:none; }
.scramble.hidden { display:none; }
@media (max-width: 720px) { .scramble { right:20px; } }
@media (max-height: 520px) { .scramble { bottom:calc(env(safe-area-inset-bottom, 0px) + 14px); } }
.hint {
  position:fixed; bottom:calc(env(safe-area-inset-bottom, 0px) + 48px); right:32px; z-index:10;
  color:var(--ink-dim); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase;
  opacity:1; transition:opacity 1.2s ease;
  pointer-events:none;
}
.hint.faded { opacity:0; }

.progress {
  position:fixed; bottom:0; left:0; height:1px; width:100%;
  background:rgba(255,255,255,.07); z-index:10;
}
.progress span {
  display:block; height:100%; width:0;
  background:rgba(255,255,255,.38);
}

/* ---------- lightbox ---------- */
.box {
  position:fixed; inset:0; z-index:20;
  background:var(--bg);
  display:none;
  align-items:center; justify-content:center;
  touch-action:none;
  user-select:none; -webkit-user-select:none;
}
.box.open { display:flex; }
.box.half-l { cursor:w-resize; }
.box.half-r { cursor:e-resize; }
.box img {
  max-width:100vw; max-height:100vh; max-height:100dvh;
  width:auto; height:auto; display:block;
  -webkit-user-drag:none;
  transition:transform .18s ease, opacity .18s ease;
}
.nav {
  position:absolute; top:50%; transform:translateY(-50%);
  color:var(--ink-dim); font-size:22px; font-weight:300;
  opacity:.55; pointer-events:none;
}
.nav.prev { left:24px; }
.nav.next { right:24px; }
.close {
  position:absolute; top:calc(env(safe-area-inset-top, 0px) + 12px); right:16px; z-index:2;
  border:0; background:transparent;
  min-width:44px; min-height:44px; padding:10px;
  color:var(--ink-dim); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; cursor:pointer;
  font-family:inherit;
}
.close:hover, .close:focus-visible { color:var(--ink); outline:none; }

/* ---------- collections menu ---------- */
.menu-btn {
  position:fixed; top:calc(env(safe-area-inset-top, 0px) + 18px); right:24px; z-index:30;
  border:0; background:transparent; cursor:pointer;
  min-width:44px; min-height:44px; padding:12px;
  display:flex; flex-direction:column; justify-content:center; gap:5px;
}
.menu-btn span {
  display:block; width:18px; height:1px; background:var(--ink);
}
.menu-btn[hidden] { display:none; }
.menu-btn:hover span, .menu-btn:focus-visible span { background:#e8e8e4; }
.menu-btn:focus-visible { outline:none; }

.subtitle {
  position:fixed; top:calc(env(safe-area-inset-top, 0px) + 44px); left:32px; z-index:10;
  color:var(--ink-dim); font-size:11px; letter-spacing:.24em;
  pointer-events:none;
}
@media (max-height: 520px) {
  .subtitle { top:calc(env(safe-area-inset-top, 0px) + 34px); }
}
@media (max-width: 720px) {
  .subtitle { left:20px; }
}

.clist { display:flex; flex-direction:column; gap:18px; }
.clist a {
  color:var(--ink); font-size:15px; line-height:1.4;
  font-weight:300; letter-spacing:.06em;
  text-decoration:none; cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.12);
  padding-bottom:6px; width:fit-content;
}
.clist a:hover, .clist a:focus-visible {
  color:#e8e8e4; border-bottom-color:rgba(255,255,255,.35); outline:none;
}
.clist a.active { color:#e8e8e4; border-bottom-color:rgba(255,255,255,.5); }

/* ---------- about / contact panels ---------- */
.panel {
  position:fixed; inset:0; z-index:40;
  background:var(--bg);
  display:none;
  align-items:center; justify-content:center;
  touch-action:manipulation;
}
.panel.open { display:flex; }
.panel-inner {
  max-width:34em; padding:0 32px;
}
.panel-inner h2 {
  color:var(--ink); font-size:11px; letter-spacing:.32em;
  text-transform:uppercase; font-weight:400;
  margin-bottom:28px;
}
.panel-inner p {
  color:var(--ink); font-size:15px; line-height:1.9;
  font-weight:300; letter-spacing:.01em;
  margin-bottom:1.2em;
}
.panel-inner .links {
  display:flex; flex-direction:column; gap:18px;
}
.panel-inner .links a {
  color:var(--ink); font-size:15px; line-height:1.4;
  font-weight:300; letter-spacing:.06em;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.12);
  padding-bottom:6px; width:fit-content;
}
.panel-inner .links a:hover, .panel-inner .links a:focus-visible {
  color:#e8e8e4; border-bottom-color:rgba(255,255,255,.35); outline:none;
}
.panel .close { z-index:2; }

@media (max-width: 720px) {
  :root { --gutter: 12px; --img-h: 60vh; --img-h: 60dvh; }
  header { left:20px; }
  .counter { left:20px; }
  .hint { right:20px; }
  .nav { display:none; }
}
/* landscape phones: short viewport, keep frames clear of name and counter */
@media (max-height: 520px) {
  :root { --img-h: 68dvh; --gutter: 16px; }
  header { top:calc(env(safe-area-inset-top, 0px) + 14px); }
  .counter { bottom:calc(env(safe-area-inset-bottom, 0px) + 14px); }
  .hint { bottom:calc(env(safe-area-inset-bottom, 0px) + 14px); }
  .meta {
    bottom:calc(env(safe-area-inset-bottom, 0px) + 34px);
    gap:6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .strip { scroll-behavior:auto !important; }
  .box img { transition:none; }
}