/* 略歴（/biography/）だけの部品: 紹介（写真・名前・肩書き）・仕事と分野の行・年表。共通の部品は ../style.css
   色は style.css の :root と面の変数（--fg / --fg-2 / --fg-3 / --rule / --rule-strong / --accent）だけを使う */

.page-bio .f-text, .page-bio .tl-text, .page-bio .profile-title { word-break: auto-phrase; }

/* ------------------------------------------------------------ 01 紹介: 写真（左6列）と名前・肩書き・紹介文・リンク（右5列。章の導入と同じ8列目から） */
.profile-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap);
  align-items: start;
}
.profile-photo { grid-column: 1 / span 6; }
.profile-photo .zoom { aspect-ratio: 4 / 3; }
.profile-photo .cap-link { justify-self: start; margin-top: 12px; }
.profile-body { grid-column: 8 / span 5; }
.profile-name { display: grid; gap: 8px; }
.profile-ja { font-weight: 700; font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: 0.24em; line-height: 1.3; }
.profile-en { font-family: var(--f-label); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); }
.profile-title {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--rule);
  font-weight: 500; font-size: 1rem; letter-spacing: 0.06em; line-height: 1.8; color: var(--fg);
}
.profile-intro { margin-top: 22px; color: var(--fg-2); }
.profile-links { margin-top: 36px; }

/* ------------------------------------------------------------ 02 仕事と分野（紙の面）: 番号・欧文と和文の見出し・文・リンク */
.field-list { border-bottom: 1px solid var(--rule); }
.field-list li {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap);
  align-items: start; padding: 26px 0 28px; border-top: 1px solid var(--rule);
}
.field-list li:first-child { border-top-color: var(--rule-strong); }
.f-no { grid-column: 1; font-family: var(--f-label); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.1em; line-height: 1.6; color: var(--accent); }
.f-label { grid-column: 2 / span 3; display: grid; gap: 4px; }
.f-en { font-family: var(--f-label); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.6; color: var(--fg-3); }
.f-ja { font-weight: 700; font-size: 1.15rem; letter-spacing: 0.14em; line-height: 1.5; }
.f-text { grid-column: 5 / span 5; line-height: 1.95; }
.f-link { grid-column: 10 / span 3; justify-self: end; align-self: start; margin-top: 4px; }

/* ------------------------------------------------------------ 03 年表（黒の面）: 年（Anton）と月日・見出し・文。行の頭の短い線だけ赤 */
.tl { border-bottom: 1px solid var(--rule); }
.tl-row {
  position: relative;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap);
  align-items: start; padding: 26px 0 30px; border-top: 1px solid var(--rule);
}
.tl-row::before { content: ""; position: absolute; left: 0; top: -1px; width: 40px; height: 1px; background: var(--red); }
.tl-when { grid-column: 1 / span 3; }
.tl-when time { display: contents; }
.tl-year { display: block; font-family: var(--f-display); font-weight: 400; font-size: clamp(2.2rem, 3.6vw, 3.2rem); line-height: 1; letter-spacing: 0.01em; }
.tl-md { display: block; margin-top: 8px; font-family: var(--f-label); font-weight: 500; font-size: 1rem; letter-spacing: 0.06em; color: var(--fg-3); }
.tl-row--now .tl-year { text-transform: uppercase; }
.tl-body { grid-column: 5 / span 6; }
.tl-label { font-weight: 700; font-size: 0.86rem; letter-spacing: 0.16em; line-height: 1.6; color: var(--fg-2); }
.tl-text { margin-top: 6px; line-height: 1.95; }
.tl-row--now .tl-text { margin-top: 0; }
.tl-link { margin-top: 14px; }

/* ------------------------------------------------------------ 中くらいの画面 */
@media (max-width: 1080px) {
  .profile-photo { grid-column: 1 / span 6; }
  .profile-body { grid-column: 7 / span 6; }
  .f-label { grid-column: 2 / span 3; }
  .f-text { grid-column: 5 / span 8; }
  .f-link { grid-column: 5 / span 8; justify-self: start; margin-top: 12px; }
  .tl-when { grid-column: 1 / span 3; }
  .tl-body { grid-column: 4 / span 9; }
}

/* ------------------------------------------------------------ スマホ */
@media (max-width: 760px) {
  .profile-grid { grid-template-columns: minmax(0, 1fr); }
  .profile-photo, .profile-body { grid-column: 1; }
  .profile-body { margin-top: 36px; }
  .profile-ja { letter-spacing: 0.18em; }

  .field-list li { grid-template-columns: 2.4em minmax(0, 1fr); column-gap: 10px; padding: 22px 0 24px; }
  .f-no { grid-column: 1; }
  .f-label, .f-text, .f-link { grid-column: 2; }
  .f-label { grid-row: 1; }
  .f-text { margin-top: 10px; }
  .f-link { margin-top: 14px; }

  .tl-row { grid-template-columns: minmax(0, 1fr); padding: 22px 0 26px; }
  .tl-when, .tl-body { grid-column: 1; }
  .tl-when { display: flex; align-items: baseline; gap: 12px; }
  .tl-year { font-size: 2.2rem; }
  .tl-md { margin-top: 0; }
  .tl-body { margin-top: 12px; }
}