/* Shared site code: ambient light tokens + the full-screen viewer. */
@property --base { syntax: '<color>'; inherits: true; initial-value: #0d0f12; }
@property --deep { syntax: '<color>'; inherits: true; initial-value: #060708; }
@property --glow { syntax: '<color>'; inherits: true; initial-value: #8aa6c8; }
@property --ink  { syntax: '<color>'; inherits: true; initial-value: #eef1f4; }

:root {
  color-scheme: dark;
  --base: #0d0f12;   /* darkened average of the current photo */
  --deep: #060708;   /* near-black, same hue */
  --glow: #8aa6c8;   /* the photo's most luminous saturated color */
  --ink:  #eef1f4;   /* text, tinted toward the glow */
  --muted: color-mix(in oklab, var(--ink) 62%, transparent);
  --faint: color-mix(in oklab, var(--ink) 16%, transparent);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  transition: --base 1.4s ease, --deep 1.4s ease, --glow 1.4s ease, --ink 1.4s ease;
}
@media (prefers-reduced-motion: reduce) { :root { transition: none; } }

body { background: var(--deep); color: var(--ink); }
img { display: block; }
.nj-thumb { position: relative; display: block; overflow: hidden; max-width: 100%; }
.nj-thumb img { position: absolute; max-width: none; height: auto; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }

/* ---------- Viewer ---------- */
.nj-viewer {
  position: fixed; inset: 0; z-index: 100;
  background: var(--deep);
  display: grid; grid-template-rows: 1fr auto;
  opacity: 0; pointer-events: none;
  transition: opacity .45s ease;
  overflow: hidden;
}
.nj-viewer.is-open { opacity: 1; pointer-events: auto; }
.nj-spill {
  position: absolute; inset: -12%;
  background-size: cover; background-position: center;
  filter: blur(70px) saturate(1.35) brightness(.62);
  transform: scale(1.1);
  transition: background-image .6s ease;
}
.nj-spill::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, color-mix(in oklab, var(--deep) 85%, transparent) 100%); }
.nj-stage { position: relative; display: grid; place-items: center; min-height: 0;
  padding: max(56px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); }
.nj-frame { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.nj-img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  box-shadow: 0 30px 120px -20px color-mix(in oklab, var(--glow) 45%, transparent);
  will-change: transform;
}
.nj-viewer.is-fill .nj-stage { padding: 0; }
.nj-viewer.is-fill .nj-img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; box-shadow: none; }
.nj-drift { animation: nj-drift 24s ease-in-out infinite alternate; }
@keyframes nj-drift { from { scale: 1; } to { scale: 1.045; } }
@media (prefers-reduced-motion: reduce) { .nj-drift { animation: none; } }

.nj-bar {
  position: relative; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 32px;
  padding: 14px max(20px, env(safe-area-inset-right, 0px)) max(18px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  background: linear-gradient(to top, color-mix(in oklab, var(--deep) 92%, transparent), transparent);
}
.nj-viewer.is-fill .nj-bar { position: absolute; inset: auto 0 0 0; }
.nj-cap { min-width: 0; }
.nj-cap h2 { margin: 0; font-size: clamp(18px, 2.2vw, 26px); font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
.nj-cap p { margin: 4px 0 0; color: var(--muted); font-size: 14px; text-wrap: pretty; }
.nj-readout { display: flex; flex-wrap: wrap; gap: 4px 18px; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--muted); }
.nj-readout b { color: var(--ink); font-weight: 600; }
.nj-gear { flex-basis: 100%; font-size: 12px; color: var(--muted); opacity: .8; }
.nj-ctrl { position: absolute; top: max(12px, env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); display: flex; gap: 6px; z-index: 2; }
.nj-btn {
  border: 1px solid var(--faint); background: color-mix(in oklab, var(--deep) 55%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  height: 40px; min-width: 40px; padding: 0 12px; border-radius: 20px; cursor: pointer; font-size: 13px;
}
.nj-btn:hover { border-color: color-mix(in oklab, var(--ink) 40%, transparent); }
.nj-nav { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; width: 44px; height: 64px; border-radius: 22px; font-size: 20px; }
.nj-prev { left: max(10px, env(safe-area-inset-left, 0px)); }
.nj-next { right: max(10px, env(safe-area-inset-right, 0px)); }
.nj-count { position: absolute; top: max(20px, env(safe-area-inset-top, 0px)); left: max(20px, env(safe-area-inset-left, 0px)); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; z-index: 2; }
.nj-bar, .nj-ctrl, .nj-nav, .nj-count { transition: opacity .3s ease; }
.nj-viewer.is-clean :is(.nj-bar, .nj-ctrl, .nj-nav, .nj-count) { opacity: 0; pointer-events: none; }
.nj-viewer.is-clean .nj-stage { cursor: zoom-out; }
@media (max-width: 640px) {
  .nj-nav { display: none; }
  .nj-stage { padding-top: max(68px, calc(env(safe-area-inset-top, 0px) + 60px)); }
  .nj-bar { gap: 8px; }
  .nj-cap h2 { font-size: 18px; }
  .nj-readout { gap: 2px 12px; font-size: 12px; }
  .nj-img { box-shadow: 0 20px 60px -20px color-mix(in oklab, var(--glow) 45%, transparent); }
}