/* =====================================
   About — 中の人について
   見出しを出さず、二人ぶんの札だけを余白の中に置く。
   一覧のような密度は持たせない。
===================================== */

/* 目に見せないが、読み上げと文書構造のためには残しておくもの */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 大見出しがないぶん、戻り口との間を開けて頭を作る */
.about-members {
  display: grid;
  gap: clamp(48px, 6vw, 88px);

  width: min(100%, 720px);
  padding-top: clamp(56px, 8vw, 120px);
}

/* 二人ぶんを上下に積み、それぞれの中でアイコンを左、文字を右に置く。
   横に組むと縦の丈が縮み、名前と紹介文の頭が一本の線に揃う。 */
.about-member {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: clamp(20px, 3.5vw, 34px);
}

/* --- アイコン --- */

.about-member-icon {
  width: clamp(96px, 14vw, 148px);
  aspect-ratio: 1 / 1;

  background: rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 0 0 1px rgba(47, 44, 41, 0.11);
}

.about-member-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- 本文 ---
   名前の一行目がアイコンの天と揃うよう、行の余りぶんだけ引き上げる。 */

.about-member-body {
  display: grid;
  gap: 10px;

  margin-top: -0.22em;
}

.about-member h2 {
  margin: 0;

  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.45;
}

.about-member-word {
  margin: 0;

  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 2;
}

/* --- 各自のリンク ---
   TOPの帯に置いた外部リンクと同じ組み。左へ抜ける動きも揃えて、
   「左＝ここから出ていく」という規則をページをまたいで通す。 */
.about-member-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 8px;

  margin-top: 6px;

  color: rgb(56, 48, 56);
  font-family: var(--font-label);
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: 0.14em;   /* 0.15em にトラッキング -10（-0.01em） */
  line-height: 1;
}


.about-member-links a {
  padding: 2px 0;
  border-bottom: 1px solid transparent;

  transition:
    color 0.3s ease,
    border-color 0.3s ease,
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.about-member-links a:hover,
.about-member-links a:focus-visible {
  color: rgb(38, 30, 38);
  border-color: currentColor;
  transform: translateX(-4px);
}

/* 区切りは文字より一回り大きく、薄く */
.about-member-links > span {
  font-size: 1.2em;
  opacity: 0.72;
}

/* 狭い画面でも横組みは崩さない。アイコンを絞って、
   紹介文に読める幅を残す。 */
@media (max-width: 767px) {
  .about-members {
    padding-top: 44px;
  }

  .about-member-icon {
    width: clamp(72px, 21vw, 104px);
  }

  .about-member-word {
    font-size: 0.8rem;
    line-height: 1.95;
  }

  /* ぼぶの四つは狭い画面で必ず折り返す。成り行きに任せると区切りが
     行末に取り残されるので、YouTube の前で行を割り、そこの区切りは
     出さない。高さを持たない一行を挟むぶん、行間が二重にかからないよう
     row-gap の一回ぶんを戻す。 */
  .about-member-links > .about-links-break {
    flex-basis: 100%;
    height: 0;
    margin-top: -8px;

    font-size: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-member-links a:hover,
  .about-member-links a:focus-visible {
    transform: none;
  }
}