/* ==========================================================================
   portfolio.css — 「SOLO EXHIBITION」 写真家・佐藤明彦の個展ページ
   このページだけ世界観を切り替える: Cormorant Garamond(伊) + Shippori Mincho。
   色は共通トークン(柔らかい墨色)のまま、光は写真だけが持つ。
   キャプションなし・作品番号のみ。reduced-motion / ?fx=0 では全演出が静的化。
   ========================================================================== */

.p-exhibit {
  --ex-serif: "Cormorant Garamond", "Times New Roman", serif;
  --ex-mincho: "A1明朝", "Hiragino Mincho ProN", serif;
}

/* ---------- ヘッダー: 個展では透明に溶かす(スクロールで通常復帰) ---------- */

.p-exhibit .site-header.is-page {
  position: fixed;
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.p-exhibit .site-header.is-page.is-scrolled {
  background: rgba(16, 19, 22, .82);
  border-bottom-color: var(--c-line);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* ===========================================================
   第0幕: Cover
   =========================================================== */

.ex-cover {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--c-black);
}

.ex-cover__media,
.ex-cover__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .ex-cover__media img { animation: exBreath 18s ease-in-out infinite alternate; }
  @keyframes exBreath { from { transform: scale(1); } to { transform: scale(1.045); } }
}

.ex-cover__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(10, 12, 14, .4), transparent 30%),
    linear-gradient(to top, rgba(10, 12, 14, .68), transparent 55%);
}

.ex-cover__body {
  position: absolute;
  left: var(--pad-x);
  right: var(--pad-x);
  bottom: clamp(3rem, 10vh, 6rem);
}

.ex-kicker {
  font-family: var(--ex-serif);
  font-size: clamp(12px, 1.3vw, 15px);
  font-weight: 500;
  letter-spacing: .52em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  margin-bottom: 1.1rem;
}

.ex-title {
  font-family: var(--ex-serif);
  font-weight: 300;
  font-size: clamp(3.4rem, 11vw, 9.5rem);
  line-height: .96;
  letter-spacing: .04em;
}

.ex-title em {
  font-style: italic;
  font-weight: 400;
}

.ex-sub {
  margin-top: 1.2rem;
  font-family: var(--ex-serif);
  font-style: italic;
  font-size: clamp(15px, 1.8vw, 21px);
  font-weight: 400;
  letter-spacing: .14em;
  color: var(--c-text-dim);
}

.ex-scroll {
  position: absolute;
  right: var(--pad-x);
  bottom: clamp(3rem, 10vh, 6rem);
  writing-mode: vertical-rl;
  font-family: var(--ex-serif);
  font-style: italic;
  font-size: 12px;
  letter-spacing: .4em;
  color: var(--c-text-faint);
}

/* ===========================================================
   第1幕: Statement(縦書きの明朝)
   =========================================================== */

.ex-statement {
  display: grid;
  place-items: center;
  padding-block: clamp(7rem, 18vh, 13rem);
  background: var(--c-bg);
}

.ex-statement__inner { display: grid; justify-items: center; gap: 3rem; }

.ex-statement__jp {
  writing-mode: vertical-rl;
  font-family: var(--ex-mincho);
  font-size: clamp(15px, 1.7vw, 19px);
  line-height: 2.6;
  letter-spacing: .3em;
  max-height: 24em;
  color: var(--c-text);
}

.ex-statement__en {
  font-family: var(--ex-serif);
  font-size: clamp(13px, 1.4vw, 16px);
  letter-spacing: .12em;
  text-align: center;
  line-height: 2;
  color: var(--c-text-faint);
}

/* ===========================================================
   幕共通: 見出し(ローマ数字+イタリック)
   =========================================================== */

.ex-act { position: relative; background: var(--c-bg); }

.ex-act__hd {
  display: flex;
  align-items: baseline;
  gap: 1.6rem;
  padding: clamp(4rem, 9vh, 7rem) var(--pad-x) clamp(2rem, 5vh, 3.4rem);
}

.ex-act__no {
  font-family: var(--ex-serif);
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  font-weight: 400;
  color: var(--c-text-faint);
}

.ex-act__name {
  font-family: var(--ex-serif);
  font-weight: 300;
  font-size: clamp(2.6rem, 7vw, 5.6rem);
  line-height: 1;
  letter-spacing: .03em;
}

.ex-act__name em { font-style: italic; font-weight: 400; }

.ex-act__name--small { font-size: clamp(2rem, 4.6vw, 3.4rem); }

.ex-act__hint {
  padding: 0 var(--pad-x) 1.6rem;
  margin-top: -1.2rem;
  font-family: var(--ex-serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: .18em;
  color: var(--c-text-faint);
}

/* 作品番号(共通) */
.ex-frame__no {
  position: absolute;
  left: 0;
  bottom: -1.9em;
  font-family: var(--ex-serif);
  font-size: 12px;
  letter-spacing: .26em;
  color: var(--c-text-faint);
  transition: color .3s ease;
}

a:hover > .ex-frame__no { color: var(--c-ice); }

/* ===========================================================
   第2幕: Ⅰ Landscape — 横スクロールの回廊
   =========================================================== */

.ex-rail { overflow: hidden; }

.ex-rail__track {
  display: flex;
  align-items: center;
  gap: clamp(2.4rem, 5vw, 5rem);
  padding: 2rem var(--pad-x) clamp(5rem, 11vh, 8rem);
  width: max-content;
}

.ex-frame {
  position: relative;
  flex: none;
  display: block;
}

.ex-rail__track .ex-frame img {
  height: clamp(320px, 58vh, 560px);
  width: auto;
  max-width: 78vw;
  display: block;
}

/* 非fx(GSAPなし)とピン無効時: ネイティブ横スクロール+スナップ */
html:not(.ex-pin) .ex-rail {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

html:not(.ex-pin) .ex-rail .ex-frame { scroll-snap-align: center; }

html.ex-pin .ex-rail { overflow: hidden; }

/* ===========================================================
   第3幕: Ⅱ Wildlife — 非対称コラージュ
   =========================================================== */

.ex-act--wildlife { padding-bottom: clamp(6rem, 13vh, 10rem); }

.ex-act__bigno {
  position: absolute;
  top: clamp(1rem, 4vh, 3rem);
  right: 4vw;
  z-index: 0;
  font-family: var(--ex-serif);
  font-size: clamp(14rem, 34vw, 30rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(233, 236, 239, .07);
  pointer-events: none;
  user-select: none;
}

.ex-collage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.2rem, 2.4vw, 2.4rem) clamp(.8rem, 1.6vw, 1.6rem);
  padding-inline: var(--pad-x);
}

.ex-piece {
  position: relative;
  display: block;
  overflow: hidden;   /* data-parallax(theater.js)用 */
}

.ex-piece img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ex-piece--a { grid-column: 1 / 8;  aspect-ratio: 3 / 2; }
.ex-piece--b { grid-column: 9 / 13; aspect-ratio: 2 / 3; margin-top: clamp(3rem, 9vh, 7rem); }
.ex-piece--c { grid-column: 2 / 7;  aspect-ratio: 4 / 3; margin-top: clamp(2rem, 6vh, 5rem); }
.ex-piece--d { grid-column: 8 / 12; aspect-ratio: 3 / 2; margin-top: clamp(5rem, 13vh, 10rem); }
.ex-piece--e { grid-column: 1 / 6;  aspect-ratio: 3 / 2; margin-top: clamp(3rem, 8vh, 6rem); }
.ex-piece--f { grid-column: 7 / 11; aspect-ratio: 4 / 3; margin-top: clamp(1rem, 4vh, 3rem); }
.ex-piece--g { grid-column: 4 / 8;  aspect-ratio: 3 / 4; margin-top: clamp(3rem, 8vh, 6rem); }

/* ===========================================================
   第4幕: Ⅲ Documentary — モノクロのフィルムストリップ
   =========================================================== */

.ex-act--documentary { background: var(--c-black); padding-bottom: clamp(6rem, 13vh, 10rem); }

.ex-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(1.6rem, 3vw, 3rem);
  padding-inline: var(--pad-x);
}

.ex-still {
  position: relative;
  flex: 1 1 240px;
  max-width: 420px;
  display: block;
}

.ex-still:nth-child(2n) { margin-top: clamp(1.6rem, 5vh, 4rem); }
.ex-still:nth-child(3n) { margin-top: clamp(.8rem, 2.6vh, 2rem); }

.ex-still img {
  width: 100%;
  display: block;
  filter: grayscale(1) contrast(1.04);
  transition: filter .5s ease;
}

.ex-still:hover img { filter: grayscale(0) contrast(1); }

@media (pointer: coarse) {
  .ex-still img { filter: grayscale(.4); } /* タッチ端末は半現像で */
}

/* ===========================================================
   第5幕: Index — コンタクトシート
   =========================================================== */

.ex-index { background: var(--c-bg); padding-bottom: clamp(5rem, 11vh, 8rem); }

.ex-index__count {
  font-family: var(--ex-serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: .2em;
  color: var(--c-text-faint);
}

.ex-index__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 6px;
  padding-inline: var(--pad-x);
}

.ex-index__grid a { display: block; opacity: .72; transition: opacity .25s ease; }
.ex-index__grid a:hover { opacity: 1; }

.ex-index__grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}

/* ===========================================================
   終幕: Signature
   =========================================================== */

.ex-sign {
  display: grid;
  grid-template-columns: minmax(180px, 300px) 1fr;
  gap: clamp(2.4rem, 6vw, 6rem);
  align-items: center;
  max-width: 980px;
  margin-inline: auto;
  padding: clamp(6rem, 14vh, 10rem) var(--pad-x);
}

.ex-sign__portrait { margin: 0; }
.ex-sign__portrait img { width: 100%; display: block; }

.ex-sign__name {
  font-family: var(--ex-serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  line-height: 1.05;
}

.ex-sign__name em { font-style: italic; }

.ex-sign__role {
  margin-top: .6rem;
  font-family: var(--ex-serif);
  font-size: 13px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}

.ex-sign__bio {
  margin-top: 1.4rem;
  max-width: 30em;
  font-size: 13.5px;
  line-height: 2.1;
  color: var(--c-text-dim);
}

.ex-sign__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-top: 2rem;
}

.ex-sign__links a {
  font-family: var(--ex-serif);
  font-style: italic;
  font-size: 15px;
  letter-spacing: .1em;
  border-bottom: 1px solid var(--c-line);
  padding-bottom: .25em;
  transition: color .3s ease, border-color .3s ease;
}

.ex-sign__links a:hover { color: var(--c-ice); border-color: var(--c-ice); }

.ex-back {
  padding: 0 var(--pad-x) clamp(4rem, 9vh, 6rem);
  text-align: center;
  background: var(--c-bg);
}

.ex-back a {
  font-family: var(--ex-serif);
  font-size: 14px;
  letter-spacing: .26em;
  color: var(--c-text-dim);
  transition: color .3s ease;
}

.ex-back a:hover { color: var(--c-ice); }

/* ===========================================================
   レスポンシブ
   =========================================================== */

@media (max-width: 900px) {
  .ex-collage { grid-template-columns: repeat(6, 1fr); }
  .ex-piece--a { grid-column: 1 / 6; }
  .ex-piece--b { grid-column: 3 / 7; margin-top: 1.6rem; }
  .ex-piece--c { grid-column: 1 / 5; margin-top: 1.6rem; }
  .ex-piece--d { grid-column: 3 / 7; margin-top: 1.6rem; }
  .ex-piece--e { grid-column: 1 / 5; margin-top: 1.6rem; }
  .ex-piece--f { grid-column: 2 / 7; margin-top: 1.6rem; }
  .ex-piece--g { grid-column: 1 / 5; margin-top: 1.6rem; }
  .ex-act__bigno { font-size: 11rem; right: 2vw; }
  .ex-sign { grid-template-columns: 1fr; max-width: 560px; }
  .ex-sign__portrait { max-width: 240px; }
}

@media (max-width: 600px) {
  .ex-rail__track .ex-frame img { height: 300px; max-width: 84vw; }
  .ex-statement__jp { max-height: 17em; letter-spacing: .22em; }
  .ex-still { flex-basis: 100%; max-width: none; }
  .ex-still:nth-child(2n), .ex-still:nth-child(3n) { margin-top: 0; }
  .ex-index__grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}

/* reduced-motion: 呼吸・現像演出を静的化 */
@media (prefers-reduced-motion: reduce) {
  .ex-cover__media img { animation: none; }
  .ex-still img { filter: grayscale(.4); transition: none; }
}