/* ==================================================
   FTR Room 01 — Exhibition v0.2
   企画展ページ（作品一覧・概要・導線）
   個別作品ページ（全文）は別途作成。全文はこのページに含まない。
   展示用英数字: Cormorant Garamond 300（全統一）
   作品番号（プレート・ENTER）は文字サイズ差で階層を表現
   日本語: Noto Serif JP 300/400
   クラス: ftr-exhibition__* = v0.1踏襲。ftr-ex2__* = v0.2追加。
   ================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --wall: #f4f1e9;
  --paper: #faf8f2;
  --ink:   #28251f;
  --soft:  #777064;
  --soft-mid:  #6c655a;
  --soft-deep: #5c564c;
  --line:  #d9d1c2;
}

body {
  background-color: var(--wall);
  background-image: radial-gradient(ellipse at 80% 5%, rgba(255,255,250,.8), transparent);
  color: var(--ink);
  font-family: 'Noto Serif JP', serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.ftr-exhibition { padding: 90px 8% 120px; }

/* ---- Room sign (v0.1と同一) ---- */
.ftr-exhibition__sign {
  width: min(720px, 100%);
  margin: 0 auto 130px;
}
.ftr-exhibition__corridor-link {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 11px;
  letter-spacing: .45em;
  color: var(--soft-mid);
  text-decoration: none;
  margin-bottom: 70px;
  transition: color .3s;
}
.ftr-exhibition__corridor-link:hover { color: var(--ink); }
.ftr-exhibition__room-number {
  font-family: 'Cormorant Garamond', serif;
  font-size: 11px;
  letter-spacing: .5em;
  color: var(--soft-mid);
  margin-bottom: 18px;
}
.ftr-exhibition__room-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 80px;
  font-weight: 300;
  letter-spacing: .22em;
  line-height: 1;
  margin-bottom: 18px;
}
.ftr-exhibition__room-jp {
  font-size: 16px;
  font-weight: 300;
  letter-spacing: .2em;
  color: var(--soft-mid);
}

/* ---- Exhibition intro (v0.1と同一。margin-bottomはthresholdに委ねる) ---- */
.ftr-exhibition__intro {
  width: min(640px, 100%);
  margin: 0 auto;
}
.ftr-exhibition__exhibit-id {
  font-size: 11px;
  color: var(--soft-mid);
  margin-bottom: 32px;
}
.ftr-exhibition__kicker-label {
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: .55em;
  margin-left: 2em;
}
.ftr-exhibition__kicker-number {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  letter-spacing: .15em;
}
.ftr-exhibition__title-en {
  font-family: 'Cormorant Garamond', serif;
  font-size: 48px;
  font-weight: 300;
  letter-spacing: .1em;
  line-height: 1.2;
  margin-bottom: 22px;
}
.ftr-exhibition__title-jp {
  font-size: 17px;
  font-weight: 300;
  letter-spacing: .1em;
  line-height: 1.9;
  margin-bottom: 90px;
}
.ftr-exhibition__curatorial {
  font-size: 14px;
  font-weight: 300;
  line-height: 2.2;
  color: var(--soft-deep);
}
.ftr-exhibition__curatorial p + p { margin-top: 1.4em; }

/* ---- Curatorial Note → 展示室への閾（通常より大きな空間） ---- */
.ftr-ex2__threshold { height: 280px; }

/* ---- 共通: 作品タイトル (v0.1踏襲) ---- */
.ftr-exhibition__work-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px;
  font-weight: 300;
  letter-spacing: .07em;
  line-height: 1.5;
  margin-bottom: 28px;
}

/* ---- 作品番号サイン
     番号の下に固定長の独立した線を置く構成。
     番号: Cormorant Garamond 300 / 34px / var(--soft)
     線: ::after / display:block / 76px / 1px / var(--line) ---- */
.ftr-ex2__work-sign {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 34px;
  font-weight: 300;
  letter-spacing: .06em;
  line-height: 1;
  color: var(--soft-mid);
  margin-bottom: 22px;
}
.ftr-ex2__work-sign::after {
  content: '';
  display: block;
  width: 76px;
  height: 1px;
  background-color: var(--line);
  margin-top: 10px;
}

/* ---- 作品入口リンク（Cormorant / ENTER WORK → / 12px） ---- */
.ftr-ex2__enter {
  display: inline-block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: .42em;
  color: var(--soft-mid);
  text-decoration: none;
  transition: color .3s, border-color .3s;
  margin-top: 6px;
  border: 1px solid var(--line);
  padding: 13px 22px;
}
.ftr-ex2__enter:hover { color: var(--ink); border-color: var(--soft-mid); }

/* ---- Work 基本 ---- */
.ftr-ex2__work {
  max-width: 480px;
  margin-bottom: 220px;
}

/* ---- Work 01: 左寄り / 大きな数字が先 ---- */
.ftr-ex2__work--w01 {
  margin-left: 0;
  margin-right: auto;
}
.ftr-ex2__cost-primary {
  font-family: 'Cormorant Garamond', serif;
  font-size: 50px;
  font-weight: 300;
  letter-spacing: .03em;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 44px;
}

/* ---- Work 02: 右寄り / 写真 + 2つの数字を離して配置 ---- */
.ftr-ex2__work--w02 {
  max-width: 520px;
  margin-left: auto;
  margin-right: 0;
}
.ftr-ex2__stat-views {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 300;
  letter-spacing: .22em;
  color: var(--soft-mid);
  margin-top: 32px;
  display: block;
}
.ftr-ex2__photo-block {
  margin-top: 28px;
}
.ftr-ex2__photo {
  display: block;
  width: 100%;
  height: auto;
}
.ftr-ex2__stat-cost {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: .22em;
  color: var(--soft-mid);
  margin-top: 44px;
  margin-bottom: 32px;
  display: block;
}

/* ---- Work 03: 中央 / 静か / 43 / 8 が先 ---- */
.ftr-ex2__work--w03 {
  max-width: 360px;
  margin: 0 auto 260px;
}
/* PC: 改行を「いちばん高いのは、」/「お金なのか」に制御 */
.ftr-ex2__work--w03 .ftr-exhibition__work-title {
  word-break: keep-all;
}
/* 「いちばん高いのは、」/「お金なのか」の改行。モバイル・PC両方で表示 */
.ftr-ex2__pc-br { display: inline; }

/* モバイル専用改行: PCでは非表示、モバイル(<=700px)でのみ有効 */
.ftr-ex2__mobile-br { display: none; }
@media (max-width: 700px) { .ftr-ex2__mobile-br { display: inline; } }

/* Cormorant Garamond 300 / 68px（Playfair版78pxから約13%縮小）
   Cormorantの数字の癖を目立ちにくくしつつ、展示の中心数字として十分強く見せる */
.ftr-ex2__cost-large {
  font-family: 'Cormorant Garamond', serif;
  font-size: 68px;
  font-weight: 300;
  letter-spacing: .05em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 44px;
}
.ftr-ex2__age-labels {
  display: flex;
  gap: 2.8em;
  margin-top: 14px;
  margin-bottom: 36px;
}
.ftr-ex2__age-labels span {
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px;
  letter-spacing: .35em;
  color: var(--soft-mid);
}

/* ---- Work 04: 中央 / 縦に長い / 断片をスクロールで体験 ---- */
.ftr-ex2__work--w04 {
  max-width: 480px;
  margin: 0 auto 300px;
}
.ftr-ex2__reset-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 12px;
  letter-spacing: .58em;
  color: var(--soft-mid);
  margin-bottom: 40px;
}
.ftr-ex2__reset-label--bottom {
  margin-top: 52px;
  margin-bottom: 36px;
}
.ftr-ex2__fragments {
  margin-top: 56px;
}
.ftr-ex2__fragment {
  font-family: 'Noto Serif JP', serif;
  font-size: 13px;
  font-weight: 300;
  line-height: 2.0;
  letter-spacing: .04em;
  color: var(--soft-deep);
  margin-bottom: 2em;
}
/* PCでごく軽く左右へ */
.ftr-ex2__fragment--left  { padding-left: 0; }
.ftr-ex2__fragment--right { padding-left: 2.8em; }
/* 生活を作る具体動作（到着→いつもの橋渡し）
   本文から抜き出した短い断片。主断片より小さく・softerに。 */
.ftr-ex2__fragment-life {
  margin: 0 0 2.5em;
}
.ftr-ex2__fragment-life p {
  font-family: 'Noto Serif JP', serif;
  font-size: 13px;
  font-weight: 300;
  line-height: 2.0;
  letter-spacing: .04em;
  color: var(--soft-deep);
  margin-bottom: .9em;
}
.ftr-ex2__fragment-life p:last-child { margin-bottom: 0; }
/* 転換ブロック: 「そして、移動する。」と「また、新しい街。」を1まとまりに
   2文の間は通常改行のみ。前後に転換としての余白を確保。 */
.ftr-ex2__fragment-end {
  margin-top: 3.5em;
  margin-bottom: 2.5em;
  font-family: 'Noto Serif JP', serif;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.9;
  letter-spacing: .04em;
  color: var(--soft-deep);
}
.ftr-ex2__fragment-end p { margin: 0; }

/* ---- Work 05: 中央 / 最大余白 / 冒頭の2行のみ ---- */
.ftr-ex2__work--w05 {
  max-width: 420px;
  margin: 0 auto 280px;
}
.ftr-ex2__dragons-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  font-weight: 300;
  font-style: normal;
  letter-spacing: .14em;
  color: var(--soft-mid);
  margin-bottom: 24px;
}
.ftr-ex2__opening {
  margin-top: 32px;
  margin-bottom: 40px;
  font-size: 14px;
  font-weight: 300;
  line-height: 2.3;
  color: var(--soft-deep);
}
.ftr-ex2__opening p + p { margin-top: .8em; }
.ftr-ex2__opening-en { font-family: 'Cormorant Garamond', serif; }

/* ---- EXIT ---- */
.ftr-ex2__exit-space { height: 180px; }
.ftr-ex2__exit { text-align: center; padding-bottom: 120px; }
.ftr-ex2__corridor-return {
  font-family: 'Cormorant Garamond', serif;
  font-size: 11px;
  letter-spacing: .45em;
  color: var(--soft-mid);
  text-decoration: none;
  transition: color .3s;
}
.ftr-ex2__corridor-return:hover { color: var(--ink); }

/* ---- Fade-in (v0.1と同方式) ---- */
.js-loaded .ftr-ex2__work {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}
.js-loaded .ftr-ex2__work.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .js-loaded .ftr-ex2__work { opacity: 1; transform: none; transition: none; }
}

/* ---- Mobile ---- */
@media (max-width: 700px) {
  .ftr-exhibition         { padding: 50px 22px 80px; }
  .ftr-exhibition__room-title {
    font-size: 40px;
    letter-spacing: .1em;
    white-space: nowrap;
  }
  .ftr-exhibition__title-en   { font-size: 34px; }
  .ftr-exhibition__title-jp   { word-break: keep-all; }
  .ftr-exhibition__work-title { font-size: 26px; word-break: keep-all; }
  .ftr-ex2__threshold         { height: 140px; }
  .ftr-ex2__cost-primary      { font-size: 36px; }
  .ftr-ex2__cost-large        { font-size: 58px; }

  /* 全作品を単一カラム・中央へ */
  .ftr-ex2__work,
  .ftr-ex2__work--w01,
  .ftr-ex2__work--w02,
  .ftr-ex2__work--w03,
  .ftr-ex2__work--w04,
  .ftr-ex2__work--w05 {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 140px;
  }

  /* Work 04: 断片の左右シフトを解除 */
  .ftr-ex2__fragment--right { padding-left: 0; }

  .ftr-ex2__exit-space { height: 100px; }
}