/* =========================================================
   meloelle.jp 2.0
   PROFILE
   ========================================================= */


/* =========================================================
   01. PAGE / HERO
   ========================================================= */

.profile-page {
  width: min(100% - 48px, 1120px);
}

.profile-hero {
  margin-bottom: 72px;
}


/* =========================================================
   02. PROFILE SECTIONS
   ========================================================= */

.profile-sections {
  border-top: 1px solid var(--archive-line-strong);
}

.profile-section {
  display: grid;
  grid-template-columns:
    minmax(190px, 0.3fr)
    minmax(0, 1fr);
  gap: clamp(40px, 7vw, 96px);
  padding:
    clamp(34px, 4vw, 52px)
    0
    clamp(64px, 7vw, 92px);
  border-bottom: 1px solid var(--archive-line-strong);
}

.profile-section__heading,
.profile-section__content {
  min-width: 0;
}

.profile-section__number {
  margin: 0 0 14px;
  color: var(--archive-muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.profile-section__heading h2 {
  margin: 0;
  font-size: clamp(1.45rem, 3vw, 2.35rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.08;
}

.profile-section__intro {
  max-width: 18rem;
  margin: 20px 0 0;
  color: var(--archive-muted);
  font-size: 0.78rem;
  line-height: 1.8;
}


/* =========================================================
   03. BIOGRAPHY
   ========================================================= */

.profile-biography {
  display: grid;
  gap: 36px;
}

.profile-biography__identity {
  padding-bottom: 28px;
  border-bottom: 1px solid var(--archive-line);
}

.profile-biography__name-ja {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.6rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.profile-biography__name-en {
  margin: 10px 0 0;
  color: var(--archive-muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.profile-biography__facts {
  margin: 0;
  border-top: 1px solid var(--archive-line);
}

.profile-biography__facts div {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--archive-line);
}

.profile-biography__facts dt,
.profile-biography__facts dd {
  margin: 0;
}

.profile-biography__facts dt {
  color: var(--archive-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.profile-biography__facts dd {
  font-size: 0.9rem;
  line-height: 1.8;
}

.profile-biography__summary {
  max-width: 42rem;
  margin: 0;
  font-size: 0.94rem;
  line-height: 2;
}


/* =========================================================
   04. STATEMENT / READING SURFACE
   ========================================================= */

.profile-reading-surface {
  box-sizing: border-box;
  width: 100%;
  padding:
    clamp(34px, 4vw, 56px)
    clamp(30px, 5vw, 64px);
  background: rgba(255, 255, 255, 0.9);
}

.profile-reading-surface p {
  max-width: 48rem;
  margin: 0;
  font-size: clamp(0.94rem, 1.4vw, 1.04rem);
  line-height: 2.15;
}

.profile-reading-surface p + p {
  margin-top: 1.8rem;
}

.profile-reading-surface
.profile-reading-surface__note {
  margin-top: 2.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--archive-line);
  color: var(--archive-muted);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.4;
}


/* =========================================================
   05. RECORD BLOCK
   ========================================================= */

.profile-record-block + .profile-record-block {
  margin-top: 64px;
}

.profile-record-block__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 0;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--archive-line-strong);
}

.profile-record-block__heading p,
.profile-record-block__heading span {
  margin: 0;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.profile-record-block__heading span {
  color: var(--archive-muted);
}


/* =========================================================
   06. SIMPLE RECORD LIST
   ========================================================= */

.profile-record-list,
.profile-year-group__records {
  margin: 0;
  padding: 0;
  list-style: none;
}

.profile-record {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 28px;
  padding: 19px 0;
  border-bottom: 1px solid var(--archive-line);
}

.profile-record__year {
  padding-top: 2px;
  color: var(--archive-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.profile-record__title,
.profile-record__meta {
  margin: 0;
}

.profile-record__title {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.65;
}

.profile-record__meta {
  margin-top: 6px;
  color: var(--archive-muted);
  font-size: 0.74rem;
  line-height: 1.6;
}


/* =========================================================
   07. YEAR ARCHIVE
   ========================================================= */

.profile-year-list {
  border-bottom: 1px solid var(--archive-line);
}

.profile-year-group {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 28px;
  padding: 0;
  border-bottom: 1px solid var(--archive-line);
}

.profile-year-group:last-child {
  border-bottom: 0;
}

.profile-year-group__year {
  margin: 0;
  padding: 22px 0;
  color: var(--archive-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.profile-year-record {
  padding: 20px 0;
  border-bottom: 1px solid var(--archive-line);
}

.profile-year-record:last-child {
  border-bottom: 0;
}

.profile-year-record__title,
.profile-year-record__meta {
  margin: 0;
}

.profile-year-record__title {
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.7;
}

.profile-year-record__meta {
  margin-top: 5px;
  color: var(--archive-muted);
  font-size: 0.72rem;
  line-height: 1.6;
}


/* =========================================================
   08. AWARDS / RESIDENCY
   ========================================================= */

.profile-other-records {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--archive-line-strong);
  border-bottom: 1px solid var(--archive-line-strong);
}

.profile-other-record {
  min-width: 0;
  padding: clamp(28px, 4vw, 44px);
}

.profile-other-record + .profile-other-record {
  border-left: 1px solid var(--archive-line);
}

.profile-other-record__type,
.profile-other-record__year,
.profile-other-record__meta {
  margin: 0;
}

.profile-other-record__type {
  color: var(--archive-muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.profile-other-record__year {
  margin-top: 24px;
  color: var(--archive-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.profile-other-record h3 {
  margin: 9px 0 0;
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-weight: 600;
  line-height: 1.6;
}

.profile-other-record__meta {
  margin-top: 10px;
  color: var(--archive-muted);
  font-size: 0.74rem;
  line-height: 1.7;
}


/* =========================================================
   09. TABLET
   ========================================================= */

@media (max-width: 800px) {

  /*
   * Mobileでは長い縦スクロールの中で
   * Sectionの切り替わりを認識しやすくする。
   * 最初のBIOGRAPHYはHeroとの関係を維持するため対象外。
   */
  .profile-section + .profile-section {
    padding-top: 56px;
  }

  .profile-page {
    width: min(100% - 40px, 1120px);
  }

  .profile-section {
    grid-template-columns: 1fr;
    gap: 28px;
    padding:
      32px
      0
      56px;
  }

  .profile-section__intro {
    max-width: 32rem;
  }

  .profile-record-block + .profile-record-block {
    margin-top: 48px;
  }
}


/* =========================================================
   10. MOBILE
   ========================================================= */

@media (max-width: 600px) {
  .profile-page {
    width: min(100% - 32px, 1120px);
  }

  .profile-hero {
    margin-bottom: 28px;
  }

  .profile-section {
    padding:
      28px
      0
      48px;
  }

  .profile-biography {
    gap: 28px;
  }

  .profile-biography__facts div {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .profile-reading-surface {
    padding: 28px 22px;
  }

  .profile-record-block__heading {
    display: block;
  }

  .profile-record-block__heading span {
    display: block;
    margin-top: 6px;
  }

  .profile-record {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .profile-year-group {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .profile-year-group__year {
    padding:
      22px
      0
      10px;
  }

  .profile-year-group__records {
    padding-bottom: 12px;
  }

  .profile-other-records {
    grid-template-columns: 1fr;
  }

  .profile-other-record + .profile-other-record {
    border-top: 1px solid var(--archive-line);
    border-left: 0;
  }
}


/* =========================================================
   11. DESKTOP
   左カラムを現在位置を示すIndexとして機能させ、
   履歴部分の密度とHero・終端の間隔を調整する。
   ========================================================= */

@media (min-width: 801px) {

  /*
   * Archive Headerの下で各Section headingを保持する。
   * stickyはsection自身の範囲内でのみ有効となるため、
   * 次Sectionへ到達すると自然に入れ替わる。
   */
  .profile-section__heading {
    position: sticky;
    top: 104px;
    align-self: start;
  }


  /*
   * EXHIBITIONS / PROJECTSのrecord密度調整。
   * Typographyや情報階層は変更せず、
   * 行間の余白だけを約10〜15%圧縮する。
   */
  .profile-record {
    padding:
      16px
      0;
  }

  .profile-year-group__year {
    padding:
      19px
      0;
  }

  .profile-year-record {
    padding:
      17px
      0;
  }


  /*
   * SOLO → GROUP間もわずかに圧縮。
   * 2つのArchive群としての分離感は維持する。
   */
  .profile-record-block + .profile-record-block {
    margin-top: 56px;
  }


  /*
   * Heroと最初のBIOGRAPHYの距離を
   * 約1グリッド弱だけ縮める。
   */
  .profile-hero {
    margin-bottom: 48px;
  }


  /*
   * ページ末尾のAWARDS / RESIDENCYだけ
   * 下方向の余白を少し短くする。
   */
  .profile-section--other {
    padding-bottom: clamp(40px, 5vw, 64px);
  }
}