/* ===================================================================
   photo.css — Photography page「光の卓」
   ライトテーブルの上に、全写真のプリントを無造作に広げた 1 枚の無限の平面。
   明るい中性色の地、Inter Tight のみ、影で浮くプリント。縦スクロールのページは持たない。
   =================================================================== */

@font-face { font-family: 'Inter Tight'; font-weight: 300 800; font-display: swap; src: url('../assets/fonts/inter-tight-latin.woff2') format('woff2'); }

:root {
  --bg: #e7e7e2;
  --ink: #131313;
  --dim: #7d7d77;
  --line: rgba(19, 19, 19, 0.16);
  --sans: 'Inter Tight', 'Helvetica Neue', Arial, 'Hiragino Sans', sans-serif;
  --pad: clamp(16px, 2.4vw, 36px);
  --ease: cubic-bezier(.19, 1, .22, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; background: var(--bg); }   /* ページ外へのスクロール連鎖・バウンスを禁止 */
body { color: var(--ink); font-family: var(--sans); font-size: 12px; line-height: 1.5; letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: inherit; cursor: pointer; }
img { display: block; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
@media (pointer: fine) { html.js.has-cur, html.js.has-cur * { cursor: none !important; } }
@media (pointer: coarse) { .cur { display: none; } }

/* 卓の光：中央がわずかに明るい */
body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, rgba(255,255,255,.55), rgba(255,255,255,0) 62%); }

/* ---------- Loader ---------- */
.loader { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: grid; place-content: center; justify-items: center; gap: 1rem; clip-path: inset(0% 0% 0% 0%); }
html:not(.js) .loader, .loader.done { display: none; }
.loader-word { margin: 0; font-weight: 800; font-size: clamp(100px, 24vw, 360px); letter-spacing: -0.07em; line-height: .8; }
.loader-num { margin: 0; color: var(--dim); font-variant-numeric: tabular-nums; letter-spacing: .1em; }

/* ---------- Cursor ---------- */
.cur { position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none; opacity: 0; }
.cur-dot { display: grid; place-items: center; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--ink); transition: width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), background-color .3s; }
.cur.big .cur-dot { width: 78px; height: 78px; margin: -39px 0 0 -39px; }
.cur.sm .cur-dot { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; }
.cur-label { color: #fff; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: 0; transition: opacity .2s; }
.cur.big .cur-label { opacity: 1; }

/* ---------- 固定の枠 ---------- */
.top { position: fixed; z-index: 30; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: baseline; padding: 18px var(--pad); pointer-events: none; }
.top a { pointer-events: auto; }
.brand { font-size: 22px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.brand span { font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--dim); }
.home { font-weight: 500; }
html.js .top, html.js .dock, html.js .hint { opacity: 0; }

.stage { position: fixed; inset: 0; z-index: 1; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.stage.drag { cursor: grabbing; }

/* ---------- 卓の上のもの ---------- */
.c-word { position: absolute; left: 0; top: 0; z-index: 1; margin: 0; font-weight: 800; font-size: 34vw; letter-spacing: -0.08em; line-height: .78; color: #dcdcd6; white-space: nowrap; pointer-events: none; will-change: transform; }
.c-label { position: absolute; left: 0; top: 0; margin: 0; width: 1000px; opacity: 0; transition: opacity .6s; pointer-events: none; will-change: transform; }
.c-label b { display: block; font-size: 64px; font-weight: 800; letter-spacing: -0.06em; line-height: .9; }
.c-label span { display: block; margin-top: 10px; color: var(--dim); }
.stage.m-series .c-label { opacity: 1; }

.c-item { position: absolute; left: 0; top: 0; padding: 0; transition: opacity .5s; will-change: transform; outline-offset: 6px; }
.c-item.dim { opacity: .14; pointer-events: none; }
.pic { display: block; overflow: hidden; background: #cfcfc9; box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 22px 40px -22px rgba(0,0,0,.55); transition: box-shadow .5s var(--ease), transform .6s var(--ease); }
.pic img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.c-item:hover .pic { transform: translateY(-6px); box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 34px 50px -24px rgba(0,0,0,.6); }
.cap { position: absolute; left: 0; top: 100%; margin-top: 10px; display: flex; gap: .7em; white-space: nowrap; font-size: 10px; letter-spacing: .04em; color: var(--dim); font-variant-numeric: tabular-nums; }
.cap b { font-weight: 600; color: var(--ink); }

/* ---------- ドック ---------- */
.dock { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 14px var(--pad); }
.chips { display: flex; gap: 1.4rem; overflow-x: auto; scrollbar-width: none; padding: 4px 0; }
.chips::-webkit-scrollbar { display: none; }
.chips button { position: relative; flex: none; padding-bottom: 3px; color: var(--dim); font-weight: 500; transition: color .3s; }
.chips button::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.chips button:hover, .chips button.on { color: var(--ink); }
.chips button.on::after { transform: scaleX(1); }
.chips sup { margin-left: 3px; font-size: 9px; color: var(--dim); }
.modes { display: flex; flex: none; padding: 3px; border-radius: 999px; background: rgba(19,19,19,.08); }
.modes button { padding: 5px 14px; border-radius: 999px; font-weight: 500; color: var(--dim); transition: background-color .35s, color .35s; }
.modes button.on { background: var(--ink); color: var(--bg); }
.hint { position: fixed; z-index: 20; left: 50%; bottom: 64px; transform: translateX(-50%); margin: 0; color: var(--dim); letter-spacing: .04em; pointer-events: none; transition: opacity .8s; }
.hint.gone { opacity: 0 !important; }
.noscript { position: fixed; inset: 40% 0 auto; text-align: center; z-index: 5; }
@media (max-width: 760px) { .chips { gap: 1rem; } .brand span { display: none; } .hint { bottom: 60px; } }

/* ---------- Viewer ---------- */
.viewer { position: fixed; inset: 0; z-index: 90; background: #0b0b0b; color: #f1f1ec; overscroll-behavior: contain; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .35s; }
.viewer[hidden] { display: none; }
.viewer.on { opacity: 1; }
.v-fig { margin: 0; width: 100%; height: 100%; padding: 64px var(--pad) 70px; display: flex; align-items: center; justify-content: center; }
.v-img { max-width: 100%; max-height: 100%; object-fit: contain; opacity: 0; transition: opacity .5s; }
.v-img.ready { opacity: 1; }
.v-cap { position: absolute; left: var(--pad); right: var(--pad); bottom: 22px; display: flex; gap: 1.6rem; font-size: 11px; }
.v-cap #v-title { font-weight: 600; }
.v-cap #v-sub, .v-cap #v-count { color: #9a9a94; }
.v-cap #v-count { margin-left: auto; }
.v-close { position: absolute; top: 16px; right: var(--pad); z-index: 3; font-weight: 500; }
.v-nav { position: absolute; top: 0; bottom: 0; width: 22%; z-index: 2; display: flex; align-items: center; font-size: 22px; opacity: 0; transition: opacity .3s; }
.v-prev { left: 0; padding-left: var(--pad); }
.v-next { right: 0; padding-right: var(--pad); justify-content: flex-end; }
.v-nav:hover, .v-nav:focus-visible { opacity: 1; }
@media (hover: none) { .v-nav { opacity: .45; width: 56px; font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; } }