/* =========================================================
   KARI — biography.css（Biographyページだけの見た目）
   共通の色・フォント・タイトル・ナビ・copyright・モーションは style.css にあります。
   ---------------------------------------------------------
   1. 設定値
   2. 本文
   3. EN / JP 切り替え
   4. 写真と copyright
   5. スマートフォン・狭い画面
   6. ページ出現モーションの順番
   ========================================================= */


/* ---------------------------------------------------------
   1. 設定値
   --------------------------------------------------------- */
.page-biography {
  --bio-left: 17.5vw;            /* 本文の左端 */
  --bio-width: 28.28vw;          /* 本文の幅（右端 = EN / JP の右端） */
  --bio-top: 18.7vh;             /* 本文1行目の上位置 */
  --bio-lang-top: 13.93vh;        /* EN / JP の上位置 */
  --bio-photo-left: 48.75vw;     /* 写真の左端（高さ・比率はTopの写真と共通） */

  --font-size-bio-ja: clamp(13px, 0.875vw, 21px);  /* 日本語本文 */
  --line-height-bio-ja: 1.43;                      /* 1.3 → 1.43（10%広げた） */
  --letter-spacing-bio-ja: 0.1em;                  /* 0 → 0.1em（文字送りを10%広げた） */
  --font-size-bio-en: clamp(14px, 0.9vw, 22px);    /* 英語本文 */
  --line-height-bio-en: 1.43;                      /* 1.3 → 1.43（10%広げた） */
  --letter-spacing-bio-en: 0.04em;                 /* 0 → 0.04em（文字送りを10%広げた） */
  --font-size-bio-heading-en: clamp(17px, 1.24vw, 30px); /* About など */

  --lang-switch-duration: 1.2s;  /* 言語を切り替えた時、本文が現れる時間 */
}

.page-biography {
  min-height: 100vh;
}


/* ---------------------------------------------------------
   2. 本文
   --------------------------------------------------------- */
.bio-body {
  position: absolute;
  top: var(--bio-top);
  left: var(--bio-left);
  width: var(--bio-width);
}
.bio-text[hidden] { display: none; }
/* 行末に1語・1文字だけが残る不自然な折り返しを避ける */
.bio-text p,
.bio-text li { text-wrap: pretty; }

/* 日本語 */
.bio-text--ja {
  font-family: var(--font-japanese);
  font-size: var(--font-size-bio-ja);
  line-height: var(--line-height-bio-ja);
  letter-spacing: var(--letter-spacing-bio-ja);
  word-break: auto-phrase;   /* 折り返す時は、語句の切れ目で */
}
.bio-text--ja p + p { margin-top: calc(var(--line-height-bio-ja) * 1em); }        /* 段落の間に1行分 */
.bio-text--ja .bio-exhibitions { margin-top: calc(var(--line-height-bio-ja) * 2em); }
.bio-text--ja .bio-heading {
  font-size: 1em;
  font-weight: 400;
}
.bio-text--ja .bio-heading + .bio-list { margin-top: 0.3em; }
.bio-text--ja .bio-list + .bio-heading { margin-top: calc(var(--line-height-bio-ja) * 1em); }
.bio-text--ja .bio-list li { padding-left: 1.05em; }
.bio-text--ja .bio-list li::before { content: "- "; }

/* English */
.bio-text--en {
  font-family: var(--font-serif);
  font-size: var(--font-size-bio-en);
  line-height: var(--line-height-bio-en);
  letter-spacing: var(--letter-spacing-bio-en);
  /* 「About」の分だけ上から始め、本文1行目を日本語と同じ高さにそろえる */
  margin-top: calc(var(--font-size-bio-heading-en) * -1.25);
}
.bio-text--en .bio-heading {
  font-size: var(--font-size-bio-heading-en);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 0.1em;
}
.bio-text--en .bio-exhibitions { margin-top: 1.25em; }
.bio-text--en .bio-list + .bio-heading { margin-top: 0.9em; }
.bio-text--en .bio-heading + .bio-list { margin-top: 0; }


/* ---------------------------------------------------------
   3. EN / JP 切り替え
   ナビと同じhover（opacity 50%・同じ時間）。枠のない、下線付きの文字です
   --------------------------------------------------------- */
.lang-toggle {
  position: absolute;
  top: calc(var(--bio-lang-top) - var(--bio-top));
  right: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text);
  font-family: var(--font-serif);
  font-size: var(--font-size-store);
  line-height: var(--line-height-tight);
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  cursor: pointer;
  transition: opacity var(--hover-duration) ease;
}
.lang-toggle:hover { opacity: var(--hover-opacity); }

/* 切り替えた時：本文だけが1.2秒で静かに現れる（ページ出現と同じ動き） */
.bio-text.is-switching {
  animation: page-enter var(--lang-switch-duration) var(--enter-ease) both;
}


/* ---------------------------------------------------------
   4. 写真と copyright（Topページの写真と同じ高さ・比率・余白）
   --------------------------------------------------------- */
.bio-visual {
  position: absolute;
  top: var(--page-top);
  left: var(--bio-photo-left);
}
.bio-image {
  height: min(var(--top-image-height), 90vw);
  width: auto;
  aspect-ratio: var(--top-image-ratio);
  object-fit: cover;
  background: var(--color-image-placeholder);
}
.bio-visual figcaption { margin-top: 0.35em; }


/* ---------------------------------------------------------
   5. スマートフォン・狭い画面
   KARI → タイトル → 本文 → 写真 の順に縦へ並べます。
   --------------------------------------------------------- */
.br-wide { display: inline; }

/* タブレット（画面幅761〜1199px）
   スマートフォンと同じく、本文 → 写真 の順に縦に並べます。
   本文の左端・上端はPCと同じ。幅は右のナビの手前まで広げ、写真は本文の下に */
@media (min-width: 761px) and (max-width: 1199px) {
  .page-biography {
    --bio-width: 60vw;               /* 本文の幅（PCより広く） */
    --bio-photo-width: 44vw;         /* 写真の幅 */
    --bio-photo-gap: 8vh;            /* 本文と写真の間 */
    padding: var(--bio-top) 0 12vh var(--bio-left);
  }
  .bio-body,
  .bio-visual {
    position: relative;
    top: auto;
    left: auto;
  }
  .bio-visual {
    width: var(--bio-photo-width);
    margin-top: var(--bio-photo-gap);
  }
  .bio-image { width: 100%; height: auto; }
}

/* スマートフォン（画面幅760px以下）
   タイトル → 本文（EN / JP はタイトル2行目の右）→ 写真 の順に縦に並べます。
   KARI・メニュー・タイトルの位置は style.css の共通設定です */
@media (max-width: 760px) {
  .page-biography {
    --bio-top: 80.2vw;               /* 本文の上位置 */
    --bio-photo-gap: 13.95vw;         /* 本文と写真の間 */
    --bio-bottom: 24vw;              /* いちばん下の余白 */
    --font-size-bio-ja: 2.725vw;      /* 日本語本文 */
    --line-height-bio-ja: 1.276;
    --letter-spacing-bio-ja: 0;
    --font-size-bio-en: 3.64vw;      /* 英語本文 */
    --line-height-bio-en: 1.22;
    --letter-spacing-bio-en: 0;
    --font-size-bio-heading-en: 4.9vw;   /* About など */
    --bio-en-width: 71vw;            /* 英語本文の1行の長さ */
    --font-size-lang: 2.4vw;         /* EN / JP */
    --bio-lang-right: 3.73vw;        /* EN / JP の右端（本文の右端から内側へ） */
    --bio-lang-up: 9.6vw;            /* EN / JP の高さ（本文の上端から上へ） */
    padding: var(--bio-top) var(--page-padding) var(--bio-bottom);
  }
  .bio-body,
  .bio-visual {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
  }
  .bio-text--en {
    max-width: var(--bio-en-width);
    margin-top: -1.1vw;              /* About の位置 */
  }
  .bio-text--en .bio-heading { margin-bottom: 0; }
  .bio-text--en .br-wide { display: none; }   /* 英語は自然に折り返す */
  .br-pc { display: none; }                    /* PCだけで使う改行 */
  .lang-toggle {
    top: calc(var(--bio-lang-up) * -1);
    right: var(--bio-lang-right);
    font-size: var(--font-size-lang);
  }
  .bio-visual { margin-top: var(--bio-photo-gap); }
  .bio-image { width: 100%; height: auto; }
  .page-biography .copyright { font-size: 1.74vw; }
  .bio-visual figcaption { margin-top: 1.4vw; }
}

/* ---------------------------------------------------------
   6. ページ出現モーションの順番（動きは style.css の共通設定）
   biography → exhibition → 本文 → 写真・copyright
   --------------------------------------------------------- */
.page-biography .page-title    { --enter-order: 0; }
.page-biography .page-subtitle { --enter-order: 1; }
.page-biography .bio-body      { --enter-order: 2; }
.page-biography .bio-visual    { --enter-order: 3; }

@media (prefers-reduced-motion: reduce) {
  .bio-text.is-switching { animation: none; }
}