/* ─────────────────────────────────────────────────────────────
   WIDE — a photographic archive in 19.5:9
   Paper and ink stay quiet; the motion is allowed to be loud.
   Layout numbers come from JS: --M (margin), --hd (header),
   --sx/--sy/--sw/--sh (strata stack), --cx/--cw (strata text column),
   --fx/--fy/--fw/--fh (the frame the opening flips through).
   ───────────────────────────────────────────────────────────── */
:root {
  --paper: #ecebe6;
  --ink: #161616;
  --ink-2: rgba(22, 22, 22, 0.62);
  --ink-3: rgba(22, 22, 22, 0.4);
  --line: rgba(22, 22, 22, 0.13);
  --line-2: rgba(22, 22, 22, 0.26);
  --grain-blend: multiply;
  --grain: 0.05;
  --accent: var(--ink);
  --sans: 'Inter Tight', 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC', 'Microsoft YaHei', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, 'PingFang SC', monospace;
  /* display: names, titles, series — a grotesque with character; serif: editorial accents */
  --display: 'Bricolage Grotesque', 'Inter Tight', 'PingFang SC', 'Hiragino Sans GB', system-ui, sans-serif;
  --serif: 'Instrument Serif', 'Songti SC', 'Noto Serif SC', Georgia, serif;
  --M: 32px; --hd: 72px;
  --sx: 40vw; --sy: 90px; --sw: 56vw; --sh: 80vh;
  --cx: 32px; --cw: 25vw;
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme='dark'] {
  --paper: #121211;
  --ink: #e8e6e0;
  --ink-2: rgba(232, 230, 224, 0.62);
  --ink-3: rgba(232, 230, 224, 0.38);
  --line: rgba(232, 230, 224, 0.12);
  --line-2: rgba(232, 230, 224, 0.24);
  --grain-blend: screen;
  --grain: 0.035;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  touch-action: none;
  transition: background-color 0.6s var(--ease), color 0.6s var(--ease);
}
/* a faint paper tooth over everything — the prints included */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 200; pointer-events: none;
  background-image: var(--noise); opacity: var(--grain); mix-blend-mode: var(--grain-blend);
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: var(--paper); }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: 0.01em; }
kbd {
  font-family: var(--mono); font-size: 9.5px; display: inline-grid; place-items: center; min-width: 17px; height: 16px;
  padding: 0 4px; margin-left: 4px; border: 1px solid var(--line-2); border-radius: 3px; color: var(--ink-2); line-height: 1;
}

#stage { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 1; touch-action: none; outline: none; }

/* ── the opening ───────────────────────────────────────────── */
.opening { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
body:not(.is-opening) .opening { visibility: hidden; transition: visibility 0s linear 1.4s; }
.op-name {
  position: absolute; left: var(--M); top: var(--M); margin: 0; white-space: nowrap;
  font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1; letter-spacing: -0.035em;
}
.op-name .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.04em 0.04em 0.08em 0; margin: -0.04em 0 -0.08em; }
.op-name .c { display: inline-block; transform: translateY(105%); transition: transform 1.15s var(--ease-out); transition-delay: calc(var(--i) * 42ms); }
.opening.is-in .op-name .c { transform: none; }
.opening.is-out .op-name .c { transform: translateY(-108%); transition: transform 0.75s var(--ease); transition-delay: calc(var(--i) * 18ms); }
.opening.is-out .op-name .w:nth-child(even) .c { transform: translateY(108%); }

.op-meta {
  position: absolute; left: calc(var(--M) + 200px); right: var(--M); top: calc(var(--M) + 2px); margin: 0;
  display: flex; justify-content: flex-end; gap: 0 34px;
}
.op-meta > div { min-width: 0; max-width: 260px; }
.op-meta dt, .op-meta dd { margin: 0; opacity: 0; transform: translateY(8px); transition: opacity 0.6s var(--ease), transform 0.8s var(--ease-out); transition-delay: calc(0.35s + var(--i) * 60ms); }
.op-meta dt { color: var(--ink-3); text-transform: uppercase; font-size: 9.5px; letter-spacing: 0.08em; line-height: 1.9; }
.op-meta dd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opening.is-in .op-meta dt, .opening.is-in .op-meta dd { opacity: 1; transform: none; }
.opening.is-out .op-meta dt, .opening.is-out .op-meta dd { opacity: 0; transform: translateY(-10px); transition-delay: 0s; transition-duration: 0.35s; }

.op-frame { position: absolute; left: var(--fx); top: var(--fy); width: var(--fw); height: var(--fh); }
.op-frame__top { position: absolute; left: 0; right: 0; bottom: calc(100% + 10px); display: flex; justify-content: space-between; text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.op-frame__top b { color: var(--ink); font-weight: 500; }
.op-frame__corners i { position: absolute; width: 16px; height: 16px; border: 0 solid var(--ink); transition: transform 0.9s var(--ease-out); }
.op-frame__corners i:nth-child(1) { left: -9px; top: -9px; border-width: 1.5px 0 0 1.5px; }
.op-frame__corners i:nth-child(2) { right: -9px; top: -9px; border-width: 1.5px 1.5px 0 0; }
.op-frame__corners i:nth-child(3) { right: -9px; bottom: -9px; border-width: 0 1.5px 1.5px 0; }
.op-frame__corners i:nth-child(4) { left: -9px; bottom: -9px; border-width: 0 0 1.5px 1.5px; }
.op-frame { will-change: transform; }
.opening:not(.has-frame) .op-frame { visibility: hidden; }
.op-hud { transition: opacity 0.3s var(--ease); }
.opening:not(.is-live) .op-hud { opacity: 0; }
.op-frame__cap {
  position: absolute; left: 0; right: 0; top: calc(100% + 14px);
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: baseline;
}
.op-frame__cap .mono { color: var(--ink-2); white-space: nowrap; }
.op-frame__cap b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(22px, 2.1vw, 36px); line-height: 1; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the viewfinder, inverted over whatever frame is on screen */
.op-hud { position: absolute; inset: 0; color: #fff; mix-blend-mode: difference; pointer-events: none; font-size: 10.5px; letter-spacing: 0.06em; }
.op-hud__mode { position: absolute; left: 14px; top: 12px; }
.op-hud__mode b { margin-left: 4px; padding: 0 4px; border: 1px solid currentColor; font-weight: 500; }
.op-hud__raw { position: absolute; right: 14px; top: 12px; display: flex; align-items: center; gap: 8px; }
.op-hud__raw i { width: 7px; height: 7px; border-radius: 50%; background: #fff; opacity: 0.35; }
.op-hud__raw i.on { opacity: 1; }
.op-hud__exp { position: absolute; left: 14px; right: 14px; bottom: 10px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; white-space: nowrap; }
.op-hud__exp > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.op-hud__scale { display: flex; align-items: flex-end; gap: 6px; flex: none; }
.op-hud__scale em { font-style: normal; font-size: 9px; }
.op-hud__ticks { position: relative; display: flex; align-items: flex-end; gap: 5px; height: 12px; }
.op-hud__ticks i { width: 1px; height: 5px; background: #fff; }
.op-hud__ticks i:nth-child(7) { height: 11px; }
.op-hud__ticks b { position: absolute; bottom: -8px; left: var(--needle, 50%); border: 4px solid transparent; border-bottom-color: #fff; transform: translateX(-50%); transition: left 0.12s var(--ease-out); }
/* each exposure blacks the viewfinder out, as a mirror slaps up */
.op-shutter { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.op-shutter i { position: absolute; left: 0; right: 0; height: 50.5%; background: #0a0a0a; }
.op-shutter i:first-child { top: 0; transform: translateY(-101%); }
.op-shutter i:last-child { bottom: 0; transform: translateY(101%); }
.op-shutter.snap i:first-child { animation: curtain-a var(--snap, 100ms) linear; }
.op-shutter.snap i:last-child { animation: curtain-b var(--snap, 100ms) linear; }
@keyframes curtain-a { 0% { transform: translateY(-101%); } 42%, 58% { transform: none; } 100% { transform: translateY(-101%); } }
@keyframes curtain-b { 0% { transform: translateY(101%); } 42%, 58% { transform: none; } 100% { transform: translateY(101%); } }
.op-flash { position: absolute; inset: 0; z-index: 3; background: #fff; opacity: 0; pointer-events: none; }
.op-flash.pop { animation: flash var(--fl-t, 0.35s) ease-out; }
@keyframes flash { from { opacity: var(--fl, 0.5); } to { opacity: 0; } }
.op-frame__bar { position: absolute; left: 0; right: 0; top: calc(100% + 6px); height: 1px; background: var(--line); overflow: hidden; }
.op-frame__bar i { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); transition: transform 0.3s linear; }
.op-frame > * { transition: opacity 0.5s var(--ease); }
.opening:not(.is-in) .op-frame > *, .opening.is-out .op-frame > * { opacity: 0; }
.opening.is-out .op-frame__corners i:nth-child(1) { transform: translate(-40vw, -40vh); }
.opening.is-out .op-frame__corners i:nth-child(2) { transform: translate(40vw, -40vh); }
.opening.is-out .op-frame__corners i:nth-child(3) { transform: translate(40vw, 40vh); }
.opening.is-out .op-frame__corners i:nth-child(4) { transform: translate(-40vw, 40vh); }

.op-list {
  position: absolute; left: var(--M); right: var(--M); bottom: var(--M); margin: 0; padding: 12px 0 0; list-style: none;
  columns: 4; column-gap: 28px; border-top: 1px solid var(--line-2);
}
@media (min-width: 1200px) { .op-list { columns: 6; } }
.op-list li { display: flex; gap: 10px; color: var(--ink-3); line-height: 1.95; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(6px); transition: opacity 0.5s var(--ease), transform 0.7s var(--ease-out), color 0.15s; transition-delay: calc(0.5s + var(--i) * 25ms); }
.op-list li b { flex: 0 0 auto; max-width: 72%; font-weight: 400; color: var(--ink-2); font-family: var(--sans); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.op-list li span:last-child:not(:first-child) { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.op-list li.on { color: var(--ink); }
.op-list li.on b { color: var(--ink); }
.op-list li.on::before { content: '■'; font-size: 8px; margin-right: -4px; }
.opening.is-in .op-list li { opacity: 1; transform: none; }
.opening.is-out .op-list li { opacity: 0; transform: translateY(14px); transition-delay: calc(var(--i) * 10ms); transition-duration: 0.4s; }

/* ── header ────────────────────────────────────────────────── */
.top {
  position: fixed; z-index: 20; top: 0; left: 0; right: 0; height: var(--hd);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 var(--M); pointer-events: none;
  color: #fff; mix-blend-mode: difference; /* the name and the rule invert whatever is under them */
}
.top::after { content: ''; position: absolute; left: var(--M); right: var(--M); bottom: 0; height: 1px; background: rgba(255, 255, 255, 0.22); transform-origin: 0 50%; transition: transform 1.2s var(--ease-out) 0.2s; }
body.is-loading .top::after { transform: scaleX(0); }
.top > * { pointer-events: auto; }
.brand { display: flex; align-items: baseline; gap: 16px; min-width: 0; }
.brand b { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.04em; white-space: nowrap; }
.brand .mono { color: rgba(255, 255, 255, 0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* views as a segmented control: an ink pill slides under the current one. Its own layer above the
   header, so the controls stay solid while the name inverts */
.nav { position: fixed; z-index: 21; top: 0; right: var(--M); height: var(--hd); display: flex; align-items: center; gap: 8px; transition: opacity 0.8s var(--ease) 0.3s; }
.nav__views, .nav__about, .nav__theme {
  background: var(--paper); border: 1px solid var(--line-2); border-radius: 999px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.1); transition: background-color 0.6s var(--ease), color 0.35s var(--ease), border-color 0.35s;
}
.nav__views { position: relative; display: flex; padding: 3px; }
.nav__pill { position: absolute; left: 0; top: 3px; bottom: 3px; width: 0; border-radius: 999px; background: var(--ink); pointer-events: none; transition: transform 0.55s var(--ease-out), width 0.55s var(--ease-out), opacity 0.3s; }
.nav__views button { position: relative; height: 32px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink-2); transition: color 0.35s var(--ease); }
.nav__views button:hover { color: var(--ink); }
.nav__views button.is-active { color: var(--paper); }
.nav__views sup { font-family: var(--mono); font-size: 9px; font-weight: 400; letter-spacing: 0; margin-left: 4px; vertical-align: 7px; opacity: 0.55; }
.nav__about { height: 40px; padding: 0 18px; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink-2); }
.nav__about:hover { color: var(--ink); border-color: var(--ink); }
.nav__about.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.nav__theme { width: 40px; height: 40px; display: grid; place-items: center; color: var(--ink); }
.nav__theme:hover { border-color: var(--ink); }
.nav__theme i { display: block; width: 13px; height: 13px; border-radius: 50%; border: 1px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); transition: transform 0.6s var(--ease); }
:root[data-theme='dark'] .nav__theme i { transform: rotate(180deg); }

/* ── strata ────────────────────────────────────────────────── */
.strata-ui, .field-ui, .viewer-ui { position: fixed; inset: 0; z-index: 10; pointer-events: none; transition: opacity 0.6s var(--ease); }
.strata-ui > *, .viewer-ui > * { pointer-events: auto; }
.strata-ui { opacity: 0; }
.strata-ui > * { pointer-events: none; }
.view-strata .strata-ui { opacity: 1; transition-delay: 0.4s; }
.view-strata .strata-ui > * { pointer-events: auto; }
.is-viewer .strata-ui { opacity: 0; transition-delay: 0s; }
.is-viewer .strata-ui > * { pointer-events: none; }

.nums { position: absolute; left: 0; top: 0; pointer-events: none !important; opacity: 0; transition: opacity 0.8s var(--ease); }
body.is-settled .nums { opacity: 1; }
.nums span {
  position: absolute; left: calc(var(--sx) - 46px); top: 0; width: 34px; text-align: right;
  font-size: 10px; color: var(--ink-3); font-variant-numeric: tabular-nums; line-height: 1; will-change: transform, opacity;
}
.nums span.on { color: var(--ink); }
.nums span.on::after { content: ''; position: absolute; right: -9px; top: 50%; width: 5px; height: 1px; background: var(--accent); }

.focus { position: absolute; left: var(--cx); top: 0; width: var(--cw); will-change: transform; }
.focus__body { transition: opacity 0.35s var(--ease), transform 0.5s var(--ease-out); }
.focus.is-swapping .focus__body { opacity: 0; transform: translateY(6px); transition-duration: 0.2s; }
.focus__no { display: flex; gap: 8px; color: var(--ink); font-variant-numeric: tabular-nums; }
.focus__tot { color: var(--ink-3); }
.focus__title {
  margin: 14px 0 0; font-family: var(--display); font-weight: 600; font-size: clamp(28px, 2.7vw, 46px); line-height: 1; letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}
.focus__title.is-untitled { color: var(--ink-3); font-weight: 400; }
.focus__sub { margin: 10px 0 0; color: var(--ink-2); font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.3; }
.focus__sub:empty { display: none; }
.focus__meta { margin: 22px 0 0; display: grid; grid-template-columns: auto 1fr; border-top: 1px solid var(--line); }
.focus__meta dt, .focus__meta dd { margin: 0; padding: 7px 0; border-bottom: 1px solid var(--line); }
.focus__meta dt { color: var(--ink-3); text-transform: uppercase; font-size: 9.5px; letter-spacing: 0.08em; padding-right: 18px; line-height: 1.8; }
.focus__meta dd { text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.focus__open { margin-top: 20px; text-transform: uppercase; letter-spacing: 0.08em; font-size: 10.5px; display: inline-flex; gap: 10px; align-items: center; padding-bottom: 3px; border-bottom: 1px solid var(--ink); }
.focus__open span { transition: transform 0.4s var(--ease-out); }
.focus__open:hover span { transform: translateX(4px); }

.order { position: absolute; left: var(--cx); bottom: var(--M); display: flex; align-items: baseline; gap: 14px; transition: transform 1s var(--ease-out); }
.order__label { color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px; margin-right: 4px; }
.order button { color: var(--ink-3); transition: color 0.3s; padding-bottom: 2px; border-bottom: 1px solid transparent; }
.order button:hover { color: var(--ink); }
.order button.is-active { color: var(--ink); border-color: var(--accent); }

.scan-hint { position: absolute; right: var(--M); bottom: calc(var(--M) - 4px); color: var(--ink-3); transition: opacity 1s var(--ease); margin: 0; }
.scan-hint span { display: inline-block; animation: scan 2.6s var(--ease) infinite; }
.scan-hint.is-gone { opacity: 0; }
@keyframes scan { 25% { transform: translateY(-3px); } 75% { transform: translateY(3px); } }

/* ── field ─────────────────────────────────────────────────── */
.field-ui { color: #fff; mix-blend-mode: difference; opacity: 0; }
.view-field .field-ui { opacity: 1; transition-delay: 0.3s; }
.is-viewer .field-ui, .is-opening .field-ui { opacity: 0; transition-delay: 0s; }
.field-cap { position: absolute; left: var(--M); bottom: calc(var(--M) - 0.06em); max-width: min(72vw, 1100px); }
.field-cap__no { display: flex; gap: 12px; color: #fff; text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; font-weight: 500; margin-bottom: 12px; }
.field-cap__title {
  font-family: var(--display); font-weight: 700; font-stretch: 78%; font-size: clamp(44px, 7.8vw, 140px); line-height: 0.82; letter-spacing: -0.035em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-bottom: 0.04em;
}
.field-cap__sub { margin-top: 12px; color: #fff; font-size: 11.5px; font-weight: 500; display: flex; flex-wrap: wrap; gap: 4px 0; }
.field-cap__sub span + span::before { content: '/'; margin: 0 10px; opacity: 0.5; }
.field-cap > * { transition: transform 0.7s var(--ease-out), opacity 0.4s var(--ease); }
.field-cap.is-swapping > * { opacity: 0; transform: translateY(10px); transition-duration: 0.18s; }
.field-cap.is-idle .field-cap__title { text-transform: none; font-stretch: 100%; letter-spacing: -0.05em; }
.field-hint { position: absolute; right: var(--M); bottom: var(--M); display: flex; gap: 22px; text-transform: uppercase; letter-spacing: 0.08em; font-size: 10.5px; font-weight: 500; color: #fff; }
.field-hint span::before { content: '— '; opacity: 0.5; }

/* the viewfinder: autofocus brackets that lock onto the frame under the pointer */
.finder { position: fixed; left: 0; top: 0; z-index: 12; width: 100px; height: 50px; pointer-events: none; mix-blend-mode: difference; opacity: 0; transition: opacity 0.2s; will-change: transform, width, height; }
.finder.is-on { opacity: 1; }
.finder i { position: absolute; width: 18px; height: 18px; border: 0 solid #fff; }
.finder i:nth-child(1) { left: -10px; top: -10px; border-width: 2px 0 0 2px; }
.finder i:nth-child(2) { right: -10px; top: -10px; border-width: 2px 2px 0 0; }
.finder i:nth-child(3) { right: -10px; bottom: -10px; border-width: 0 2px 2px 0; }
.finder i:nth-child(4) { left: -10px; bottom: -10px; border-width: 0 0 2px 2px; }
.finder__label { position: absolute; left: -10px; bottom: calc(100% + 16px); color: #fff; white-space: nowrap; font-size: 10.5px; letter-spacing: 0.04em; }
.cross { position: fixed; left: 0; top: 0; z-index: 13; width: 0; height: 0; pointer-events: none; mix-blend-mode: difference; opacity: 0; transition: opacity 0.15s; }
.cross.is-on { opacity: 1; }
.cross::before, .cross::after { content: ''; position: absolute; background: #fff; }
.cross::before { left: -9px; top: -0.5px; width: 18px; height: 1px; }
.cross::after { left: -0.5px; top: -9px; width: 1px; height: 18px; }

/* ── index ─────────────────────────────────────────────────── */
.index-ui {
  position: fixed; inset: 0; z-index: 10; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: none;
  padding: 0 var(--M) 32vh; color: #fff; mix-blend-mode: difference;
  opacity: 0; visibility: hidden; transition: opacity 0.6s var(--ease), visibility 0s linear 0.6s;
}
.index-ui::-webkit-scrollbar { display: none; }
.view-index .index-ui { opacity: 1; visibility: visible; transition: opacity 0.6s var(--ease) 0.35s, visibility 0s; }
.is-viewer .index-ui { opacity: 0; visibility: hidden; }
.index__head, .index__list li { display: grid; grid-template-columns: 52px 128px minmax(0, 1fr) 16vw 64px 15vw; gap: 0 24px; align-items: center; }
.index__head { color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 0.08em; font-size: 9.5px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.35); }
.index__list { list-style: none; margin: 0; padding: 0; }
.index__list li { padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); cursor: pointer; transition: opacity 0.35s var(--ease); }
.index__list .no, .index__list .place, .index__list .year, .index__list .cam { font-family: var(--mono); font-size: 11px; color: rgba(255, 255, 255, 0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.index__list .thumb { width: 128px; height: 59px; }
.index__list .title { font-family: var(--display); font-weight: 500; font-size: clamp(26px, 3.4vw, 60px); line-height: 0.95; letter-spacing: -0.035em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: transform 0.6s var(--ease-out); }
.index-ui.has-hot li { opacity: 0.32; }
.index-ui.has-hot li.is-hot { opacity: 1; }
.index__list li.is-hot .title { transform: translateX(22px); }
/* series */
/* pinned under the header; black inside the difference layer shows as paper, so rows pass cleanly beneath */
.index__top { position: sticky; top: 0; z-index: 3; margin: 0 calc(-1 * var(--M)); padding: calc(var(--hd) + 16px) var(--M) 0; background: #000; }
.index__groups { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 16px; }
.index__groups button { height: 34px; padding: 0 16px 0 6px; display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(255, 255, 255, 0.42); border-radius: 999px; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.85); transition: background 0.3s, color 0.3s; }
.index__groups button > span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: 1px solid currentColor; font-family: var(--mono); font-size: 10px; font-weight: 400; }
.index__groups sup { font-family: var(--mono); font-size: 9px; font-weight: 400; opacity: 0.6; vertical-align: 6px; margin-left: -4px; }
.index__groups button:hover, .index__groups button.is-on { background: #fff; color: #000; }
.index__list li.index__group { display: flex; align-items: baseline; gap: 24px; padding: 64px 0 14px; cursor: default; border-bottom: 1px solid rgba(255, 255, 255, 0.6); }
.index__list li.index__group:first-child { padding-top: 22px; }
.index__group .gno { width: 52px; flex: none; font-family: var(--mono); font-size: 11px; color: rgba(255, 255, 255, 0.6); }
.index__group .gname { min-width: 0; font-family: var(--display); font-weight: 700; font-stretch: 80%; font-size: clamp(40px, 6.4vw, 110px); line-height: 0.86; letter-spacing: -0.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-bottom: 0.04em; }
.index__group .gmeta { margin-left: auto; flex: none; font-family: var(--mono); font-size: 11px; color: rgba(255, 255, 255, 0.65); white-space: nowrap; }

/* ── viewer ────────────────────────────────────────────────── */
.viewer-ui { opacity: 0; }
.viewer-ui > * { pointer-events: none; }
.is-viewer .viewer-ui { opacity: 1; transition-delay: 0.35s; }
.is-viewer .viewer-ui > * { pointer-events: auto; }
.viewer__bar {
  position: absolute; left: var(--M); right: var(--M); bottom: var(--M);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr) auto; gap: 32px; align-items: start;
  border-top: 1px solid var(--line); padding-top: 16px;
}
.viewer__id .mono { color: var(--ink-3); }
.viewer__id h2 { margin: 6px 0 0; font-family: var(--display); font-weight: 600; font-size: clamp(24px, 2.1vw, 34px); line-height: 1.02; letter-spacing: -0.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer__id p { margin: 6px 0 0; color: var(--ink-2); font-family: var(--serif); font-style: italic; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer__exif { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; }
.viewer__exif div { padding: 5px 0; border-bottom: 1px solid var(--line); min-width: 0; display: flex; justify-content: space-between; gap: 10px; }
.viewer__exif dt { color: var(--ink-3); text-transform: uppercase; font-size: 9.5px; letter-spacing: 0.08em; line-height: 1.9; }
.viewer__exif dd { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer__tools { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.viewer__tools button { text-transform: uppercase; letter-spacing: 0.08em; font-size: 10.5px; color: var(--ink-2); transition: color 0.3s; }
.viewer__tools button:hover, .viewer__tools button[aria-pressed='true'] { color: var(--ink); }
.viewer__tools button[aria-pressed='true'] kbd { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.viewer__hint { color: var(--ink-3); }
.viewer__step { display: flex; gap: 14px; }
.viewer__step button { font-size: 14px; }
.viewer__desc { position: absolute; left: var(--M); bottom: calc(var(--M) + 112px); max-width: 52ch; margin: 0; color: var(--ink-2); line-height: 1.6; display: none; }

.meter { position: fixed; z-index: 30; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity 0.2s; will-change: transform; }
.meter.is-on { opacity: 1; }
.meter__cross { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; mix-blend-mode: difference; }
.meter__cross::before, .meter__cross::after { content: ''; position: absolute; background: #fff; }
.meter__cross::before { left: 10.5px; top: 0; width: 1px; height: 22px; }
.meter__cross::after { top: 10.5px; left: 0; height: 1px; width: 22px; }
.meter__read {
  position: absolute; left: 18px; top: 16px; padding: 8px 10px 9px; background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-2); white-space: nowrap; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.meter__top { display: flex; align-items: center; gap: 10px; }
.meter__top b { font-family: var(--sans); font-weight: 500; font-size: 15px; min-width: 2.2em; }
.meter__top span { color: var(--ink-2); }
.meter__top i { width: 12px; height: 12px; border: 1px solid var(--line-2); }
.meter__scale { display: grid; grid-template-columns: repeat(11, 10px); gap: 1px; margin-top: 7px; }
.meter__scale i { height: 6px; outline-offset: 1px; }
.meter__scale i.on { outline: 1px solid var(--ink); }

/* ── about ─────────────────────────────────────────────────── */
/* About opens and closes behind the blades of a focal-plane shutter: they fall shut over the
   page top to bottom, the page changes behind them, and they open again downwards */
.blades { position: fixed; inset: 0; z-index: 70; pointer-events: none; visibility: hidden; }
.blades.is-on { visibility: visible; }
.blades i {
  position: absolute; left: 0; right: 0; top: calc(var(--k) * 100% / 6); height: calc(100% / 6 + 1px);
  background: #0c0c0b; box-shadow: inset 0 -1px rgba(255, 255, 255, 0.09); transform: scaleY(0); transform-origin: 50% 0;
  transition: transform 0.34s cubic-bezier(0.7, 0, 0.84, 0) calc(var(--k) * 42ms);
}
.blades.is-shut i { transform: scaleY(1); }
.blades.is-parting i { transform-origin: 50% 100%; transform: scaleY(0); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--k) * 42ms); }
.about { position: fixed; inset: 0; z-index: 60; background: var(--paper); visibility: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.about.is-open { visibility: visible; }
.about [data-a] { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.9s var(--ease-out); transition-delay: calc(0.3s + var(--a, 0) * 70ms); }
.about.is-in [data-a] { opacity: 1; transform: none; }
.about__inner { min-height: 100%; padding: calc(var(--hd) + 18px) var(--M) var(--M); display: grid; grid-template-rows: auto auto auto 1fr auto auto; gap: clamp(26px, 5vh, 56px); }
.about__head { display: flex; justify-content: space-between; text-transform: uppercase; letter-spacing: 0.08em; font-size: 10.5px; color: var(--ink-3); }
.about__head button { color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.08em; }
.about__name { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(64px, 13vw, 230px); line-height: 0.82; letter-spacing: -0.05em; }
.about__name .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.04em 0.04em 0.1em 0; margin: -0.04em 0 -0.1em; }
.about__name .c { display: inline-block; transform: translateY(108%) rotate(6deg); transform-origin: 0 100%; transition: transform 1.1s var(--ease-out); transition-delay: calc(0.18s + var(--i) * 45ms); }
.about.is-in .about__name .c { transform: none; }
.about__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 6vw; border-top: 1px solid var(--line); padding-top: 22px; align-items: start; }
.about__grid.has-portrait { grid-template-columns: clamp(220px, 27vw, 440px) minmax(0, 1fr); }
.about__body { max-width: 50em; }
.about__tag { margin: 0 0 18px; color: var(--ink-2); }
.about__text { font-family: var(--serif); font-size: clamp(26px, 2.7vw, 46px); line-height: 1.2; letter-spacing: -0.01em; white-space: pre-line; }
.about__links { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.about__links a { text-transform: uppercase; letter-spacing: 0.08em; font-size: 10.5px; border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
/* the portrait arrives in slices from alternate sides, then develops from a halftone screen into the photograph */
.about__portrait { margin: 0; transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.6s var(--ease-out); }
.about__ph { position: relative; aspect-ratio: var(--pa, 4 / 5); overflow: hidden; }
.about__ph i {
  position: absolute; left: 0; right: 0; top: calc(var(--k) * 100% / var(--n)); height: calc(100% / var(--n) + 1px);
  background-image: var(--img); background-size: 100% calc(var(--n) * 100%); background-position: 0 calc(var(--k) * 100% / (var(--n) - 1));
  transform: translateX(calc(var(--dir) * 106%)); filter: grayscale(1) contrast(1.3);
  transition: transform 1.05s var(--ease-out) calc(0.32s + var(--k) * 55ms), filter 1.6s var(--ease) 1.15s;
}
.about.is-in .about__ph i { transform: none; filter: none; }
.about__ph::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, transparent 0 36%, var(--paper) 44%) 0 0 / 7px 7px; opacity: 1; transition: opacity 1.5s var(--ease) 1.25s; pointer-events: none; }
.about.is-in .about__ph::after { opacity: 0; }
.about__portrait figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px; }
.about__stats { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border-top: 1px solid var(--line); }
.about__stats div { padding: 14px 18px 14px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.about__stats dt { color: var(--ink-3); text-transform: uppercase; font-size: 9.5px; letter-spacing: 0.08em; }
.about__stats dd { margin: 8px 0 0; font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.about__stats dd small { display: block; margin-top: 4px; font-family: var(--mono); font-size: 10.5px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.about__keys { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--ink-3); align-self: end; }
.about__keys kbd { margin: 0 4px 0 0; }
.about__copy { margin: 0; color: var(--ink-3); }

/* ── empty / fallback ──────────────────────────────────────── */
.empty { position: fixed; inset: 0; z-index: 15; display: grid; place-content: center; justify-items: center; gap: 16px; text-align: center; padding: var(--M); }
.empty__big { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(32px, 4vw, 60px); letter-spacing: -0.04em; }
.empty .mono { color: var(--ink-3); }
.empty a { color: var(--ink); border-bottom: 1px solid var(--ink); }
.fallback { position: fixed; inset: 0; z-index: 5; overflow-y: auto; padding: calc(var(--hd) + 24px) var(--M) var(--M); display: grid; gap: 40px; touch-action: pan-y; }
.fallback figure { margin: 0; }
.fallback img { width: 100%; height: auto; display: block; }
.fallback figcaption { margin-top: 10px; font-family: var(--mono); font-size: 11px; color: var(--ink-2); }

/* ── states ────────────────────────────────────────────────── */
body.is-opening .top > *, body.is-opening .nav { opacity: 0; pointer-events: none; }
body.is-opening .top::after { transform: scaleX(0); }
.top > * { transition: opacity 0.8s var(--ease) 0.3s; }
.is-viewer .nav__views button:not(:hover) { color: var(--ink-3); }
.is-viewer .nav__pill { opacity: 0.25 !important; }

/* ── phones: the text rests below the stack ────────────────── */
body.is-vertical .brand .mono { display: none; }
body.is-vertical .nav { gap: 6px; }
body.is-vertical .nav__views { padding: 2px; }
body.is-vertical .nav__pill { top: 2px; bottom: 2px; }
body.is-vertical .nav__views button { height: 28px; padding: 0 10px; font-size: 13px; }
body.is-vertical .nav__views sup { display: none; }
body.is-vertical .nav__about { font-size: 13px; height: 34px; padding: 0 11px; }
body.is-vertical .nav__theme { width: 34px; height: 34px; }
body.is-vertical .brand b { font-size: 16px; }
body.is-vertical .index__groups { gap: 6px; flex-wrap: nowrap; overflow-x: auto; touch-action: pan-x; scrollbar-width: none; margin-right: calc(-1 * var(--M)); padding-right: var(--M); }
body.is-vertical .index__groups::-webkit-scrollbar { display: none; }
body.is-vertical .index__groups button { flex: none; }
body.is-vertical .index__groups button { height: 30px; font-size: 13px; }
body.is-vertical .index__group .gname { font-size: 36px; }
body.is-vertical .index__group .gno { width: 34px; }
body.is-vertical .index__list li.index__group { flex-wrap: wrap; gap: 6px 14px; padding-top: 44px; }
body.is-vertical .index__group .gmeta { margin-left: 48px; width: 100%; }
body.is-vertical .field-cap { max-width: none; right: var(--M); }
body.is-vertical .field-cap__title { font-size: 12vw; white-space: normal; line-height: 0.86; }
body.is-vertical .field-cap.is-idle .field-cap__title { font-size: 17vw; text-wrap: balance; }
body.is-vertical .nums span { left: calc(var(--sx) - 28px); width: 20px; font-size: 9px; }
body.is-vertical .focus { left: var(--M); right: var(--M); width: auto; top: auto; bottom: calc(var(--M) + 26px); transform: none !important; }
body.is-vertical .focus__title { font-size: 26px; margin-top: 8px; }
body.is-vertical .focus__meta { display: none; }
body.is-vertical .focus__open { margin-top: 12px; }
body.is-vertical .order { left: var(--M); bottom: var(--M); }
body.is-vertical .scan-hint { display: none; }
body.is-vertical .viewer__bar { grid-template-columns: 1fr; gap: 14px; }
body.is-vertical .viewer__exif { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.is-vertical .viewer__tools { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; }
body.is-vertical .viewer__hint { display: none; }
body.is-vertical .about__grid, body.is-vertical .about__grid.has-portrait { grid-template-columns: 1fr; }
body.is-vertical .about__portrait { width: 72%; }
body.is-vertical .op-hud__scale { display: none; }
body.is-vertical .op-name { font-size: 20px; }
body.is-vertical .op-list li span:last-child:not(:first-child) { display: none; }
body.is-vertical .op-meta { left: var(--M); right: var(--M); top: calc(var(--fy) + var(--fh) + 66px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
body.is-vertical .op-meta > div { max-width: none; }
body.is-vertical .op-list { columns: 2; }
body.is-vertical .op-list li:nth-child(n+9) { display: none; }
body.is-vertical .op-frame__cap { grid-template-columns: 44px minmax(0, 1fr); }
body.is-vertical .op-frame__cap .mono:last-child { display: none; }
body.is-vertical .field-hint { display: none; }
body.is-vertical .index__head { display: none; }
body.is-vertical .index__list li { grid-template-columns: 34px 96px minmax(0, 1fr); gap: 0 14px; }
body.is-vertical .index__list .thumb { width: 96px; height: 44px; }
body.is-vertical .index__list .place, body.is-vertical .index__list .year, body.is-vertical .index__list .cam { display: none; }
body.is-vertical .index__list .title { font-size: 24px; }

@media (prefers-reduced-motion: reduce) {
  .op-name .c, .op-list li, .op-meta dt, .op-meta dd, .about [data-a], .about__name .c, .about__ph i, .about__ph::after { transition-duration: 0.01s !important; transition-delay: 0s !important; }
}
body.is-dragging #stage { cursor: grabbing !important; }
.is-empty .field-ui { display: none; }
.op-meta, .op-list { transition: border-color 0.4s var(--ease); }
.opening:not(.is-in) .op-meta, .opening:not(.is-in) .op-list, .opening.is-out .op-meta, .opening.is-out .op-list { border-color: transparent; }