/* ========== Profile (个人页基础) ========== */
.hero--sub{ padding:56px 0 48px; }
.hero-subgrid{ display:grid; grid-template-columns:1fr auto; gap:24px; align-items:end; }
.hero-breadcrumb{ font-size:14px; color:#DDE1E7; }
.crumb{ opacity:.9; }
.crumb:hover{ text-decoration:underline; text-underline-offset:3px; }
.crumb-sep{ margin:0 8px; opacity:.6; }
.crumb-current{ opacity:1; }

.profile-grid{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:28px;
  align-items:end;
}
.profile-photo{
  aspect-ratio:3/4;
  background:linear-gradient(180deg,#ECEFF3,#E5E8EC);
  background-size:cover;
  background-position:center;
  border-radius:14px;
  position:relative; display:grid; place-items:center;
}
.profile-photo::after{
  content:"PHOTO"; font-size:12px; color:#7E8590; letter-spacing:.12em;
}
.profile-photo.has-img::after{ content:""; }

.profile-name{ font-weight:900; font-size:28px; letter-spacing:.02em; }
.profile-kana {
  font-size: 14px;
  color: var(--muted); /* 灰色 */
  margin-top: 2px;
  letter-spacing: 0.05em;
}

.profile-role{ color:var(--muted); font-size:14px; margin-top:4px; }
.profile-meta{ list-style:none; padding:0; margin:14px 0 16px; display:grid; gap:6px; font-size:14px; color:#2b2f35; }
.profile-meta a{ text-decoration:underline; text-underline-offset:2px; }
.profile-links{ display:flex; flex-wrap:wrap; gap:10px; }

/* ===== Career ===== */
.career-list{ display:grid; gap:16px; }
.career-card{ padding:16px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.career-year{ font-weight:800; font-size:15px; color:#30343a; margin-bottom:4px; }
.career-role{ font-weight:700; font-size:16px; }
.career-desc{ font-size:14px; line-height:1.8; color:#2b2f35; margin-top:6px; }

/* ===== Works ===== */
.works-year{ margin-top:24px; }
.year-label{ font-weight:800; font-size:16px; margin-bottom:8px; color:#111; }

.work-list{ list-style:none; margin:0; padding:0; border-left:2px solid var(--line); }
.work-item{
  position:relative;
  display:grid;
  grid-template-columns: 2fr 0.8fr 1fr 1.5fr;
  gap:12px;
  padding:10px 0 10px 16px;
  font-size:14px;
  align-items:center;
}
.work-item::before{
  content:""; position:absolute; left:-6px; top:50%; transform:translateY(-50%);
  width:10px; height:10px; background:#fff; border:2px solid #c7ccd3; border-radius:50%;
}
.work-item + .work-item{ border-top:1px dashed var(--line); }

.w-title{ font-weight:700; color:#111; }
.w-type{ color:var(--muted); }
.w-year{ color:#30343a; font-weight:600; }
.w-loc{ color:#2b2f35; }
.w-collab{ color:#2b2f35; font-size:13px; }

/* Hover 效果 */
.work-item:hover .w-title{ text-decoration:underline; }

/* ===== Members index ===== */
.visually-hidden{ position:absolute!important; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.members-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.member-card{
  display: grid;
  grid-template-rows: 200px auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  transition: transform .2s ease, box-shadow .2s ease;
}
.member-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

.member-photo{
  background: linear-gradient(180deg, #ECEFF3, #E5E8EC);
  background-size: cover;
  background-position: center;
}

.member-body{
  padding: 14px;
  display: grid;
  gap: 8px;
}
.member-head{ display: grid; gap: 2px; }
.member-name{
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .02em;
}
.member-role{
  font-size: 13px;
  color: var(--muted);
}

.member-meta{
  list-style: none;
  padding: 0; margin: 6px 0 0;
  display: grid; gap: 4px;
  font-size: 13px; color: #2b2f35;
}
.member-meta strong{ font-weight: 700; margin-right: 6px; }

.member-intro{
  font-size: 13px;
  color: #374151;
  line-height: 1.7;
  margin-top: 6px;
}

/* Responsive */
@media (max-width: 1024px){
  .members-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .member-card{ grid-template-rows: 180px auto; }
}
@media (max-width: 600px){
  .members-grid{ grid-template-columns: 1fr; }
  .member-card{ grid-template-rows: 180px auto; }
}