/* ===== 基本レイアウト・トークン ===== */
:root{
  --c-bg:#ffffff;
  --c-text:#0f172a;
  --c-sub:#475569;
  --c-accent:#8e00b9;        /* メタバース紫 */
  --c-line:#e5e7eb;
  --c-card:#f8fafc;
  --w-container:1100px;
}

.profile{ background:var(--c-bg); color:var(--c-text); }
.container{ max-width:var(--w-container); margin-inline:auto; padding:48px 20px; }

/* ===== Hero ===== */
.profile-hero{ display:grid; grid-template-columns: 240px 1fr; gap:32px; align-items:center; }
.avatar{ width:220px; height:220px; object-fit:cover; border-radius:50%; box-shadow:0 12px 28px rgba(0,0,0,.12); }
.name{ font-size:clamp(1.8rem, 2.4vw + 1rem, 2.6rem); margin:0 0 .25em; line-height:1.2; }
.tagline{ color:var(--c-sub); margin:0 0 1rem; }
.meta{ display:flex; flex-wrap:wrap; gap:8px; margin: 8px 0 18px; }
.chip{ font-size:.85rem; padding:.35em .7em; border:1px solid var(--c-line); border-radius:999px; color:#334155; background:#f8fafc; }
.hero-cta{ display:flex; gap:10px; flex-wrap:wrap; }
.btn-metaverse{ background:var(--c-accent); color:#fff; }

/* ===== セクション見出し ===== */
.profile-about h2,
.profile-timeline h2,
.profile-exhibitions h2,
.profile-mediaawards h2,
.profile-sns h2{ font-size:1.4rem; margin:0 0 .8em; }

/* ===== 自己紹介 ===== */
.profile-about p{ line-height:1.9; color:#1f2937; }

/* ===== タイムライン ===== */
.timeline{ list-style:none; margin:0; padding:0 0 0 22px; position:relative; }
.timeline::before{ content:""; position:absolute; left:10px; top:.2rem; bottom:.2rem; width:2px; background:var(--c-line); }
.timeline li{ position:relative; padding:14px 0 14px 14px; display:flex; gap:16px; align-items:flex-start; }
.timeline li::before{ content:""; position:absolute; left:-2px; top:22px; width:10px; height:10px; background:var(--c-accent); border-radius:50%; box-shadow:0 0 0 3px #f5f3f7; }
.timeline .time{ font-weight:700; color:#111827; min-width:56px; }
.timeline .content{ color:#334155; }

/* ===== Exhibitions / Publications （カード一覧） ===== */
.card-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card{ background:var(--c-card); border:1px solid var(--c-line); border-radius:14px; padding:16px 18px; }
.card-title{ font-weight:700; margin:0 0 .2em; }
.card-sub{ color:var(--c-sub); font-size:.95rem; }

/* ===== Media & Awards ===== */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.sub{ font-size:1.1rem; margin:.2em 0 .6em; }
.link-list{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
.link-list a{ color:#0ea5e9; text-decoration:none; position:relative; padding-right:1.05em; }
.link-list a::after{ content:"↗"; position:absolute; right:.1em; top:0; opacity:.75; }
.link-list a:hover{ text-decoration:underline; }

/* ===== SNS ===== */
.sns-links{ list-style:none; margin:0; padding:0; display:flex; gap:14px; flex-wrap:wrap; }
.sns-links a{ color:#0f172a; text-decoration:none; border:1px solid var(--c-line); border-radius:999px; padding:.45em .9em; }
.sns-links a:hover{ background:#f8fafc; }

/* ===== レスポンシブ ===== */
@media (max-width: 960px){
  .card-list{ grid-template-columns:repeat(2,1fr); }
  .grid-2{ grid-template-columns:1fr; }
}
@media (max-width: 820px){
  .profile-hero{ grid-template-columns: 1fr; text-align:center; }
  .avatar{ margin-inline:auto; }
  .timeline li{ flex-direction:column; gap:6px; }
}

.tagline .divider { margin: 0 8px; opacity: .4; }
.jp-name, .en-name { font-weight: 600; }
.hero-cta { display: none; } /* 念のため */