/* ============================================================
   home.css — Takumi Senpai · Homepage
   Path: /css/home.css

   index.html（トップ）だけが読み込む。

   クラス名はすべて .hp2- 接頭辞。style.css は読み込んでいるが
   （body / フォント / .fade-in / ナビ用の土台を借りるため）、
   #hero や #quests など既存セクションのIDは一切使っていないので
   既存のスタイルと衝突しない。例外は `footer { display:flex }` で、
   .hp2-footer 側で打ち消している（下部に注記あり）。

   ── v2（フィードバック反映）での変更点 ─────────────────────
   1. HERO を分割レイアウトに変更。写真を右カラムに置き、文字を
      写真の上に重ねるのをやめた。v1 では Takumi の顔の真上に
      見出しと暗いグラデーションが乗って顔が潰れていた。
      「拡大して顔を右へ送る」案は、元画像が 1975px しかなく
      2.5倍の拡大が必要で画質が落ちるため採らなかった。
   2. Quest カードに番号・問い・現地で分かったことを追加
      （元デザインの「調査」の手触りを持ち込む）。
   3. OPEN CASES セクションを追加。
   4. THE PERSON に Act I–III の経緯を追加（漫画への導線つき）。
   5. Credibility の写真に焦点指定を追加。16/9 の中央切り抜きだと
      縦長写真（ermita-volunteer.png は 984×1110）の顔が切れていた。
   ──────────────────────────────────────────────────────────

   Palette / typography は既存サイトと同じものを使用:
     accent #c9a84c · bg #080806
     Cormorant Garamond（見出し）/ Space Mono（ラベル）/ Inter（本文）
   ============================================================ */

.hp2 {
  --hp2-accent:     #c9a84c;
  --hp2-accent-lt:  #e3c979;
  --hp2-live:       #d4543f;
  --hp2-bg:         #080806;
  --hp2-bg-alt:     #0d0c09;
  --hp2-bg-card:    #121110;
  --hp2-text:       rgb(240 236 228);
  --hp2-text-soft:  rgba(240, 236, 228, 0.74);
  --hp2-text-faint: rgba(240, 236, 228, 0.46);
  --hp2-rule:       rgba(240, 236, 228, 0.12);
  --hp2-rule-gold:  rgba(201, 168, 76, 0.28);

  --hp2-pad-y:      clamp(84px, 11vw, 150px);
  --hp2-pad-x:      clamp(22px, 5vw, 56px);
  --hp2-max:        1180px;
  /* セクション内容の左端。HERO の文字カラムもこれに揃える */
  --hp2-gutter:     max(var(--hp2-pad-x), calc((100vw - 1180px) / 2));

  background: var(--hp2-bg);
  color: var(--hp2-text);
  font-family: 'Inter', sans-serif;
  font-weight: 300;
}

.hp2 *, .hp2 *::before, .hp2 *::after { box-sizing: border-box; }

.hp2 a { color: inherit; text-decoration: none; }
.hp2 a:visited { color: inherit; }
.hp2 :focus-visible {
  outline: 2px solid var(--hp2-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── 共通パーツ ───────────────────────────────────────────── */
.hp2-sec {
  position: relative;
  padding: var(--hp2-pad-y) var(--hp2-pad-x);
}
.hp2-sec--alt { background: var(--hp2-bg-alt); }
.hp2-sec--ruled { border-top: 1px solid var(--hp2-rule-gold); }

.hp2-inner { max-width: var(--hp2-max); margin: 0 auto; }

.hp2-eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--hp2-accent);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.6rem;
}
.hp2-eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hp2-rule-gold);
  max-width: 120px;
}

.hp2-h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 1.4rem;
}
.hp2-h2 em { font-style: italic; color: var(--hp2-accent-lt); }

.hp2-lede {
  font-size: clamp(0.98rem, 1.35vw, 1.1rem);
  line-height: 1.85;
  color: var(--hp2-text-soft);
  max-width: 60ch;
  margin: 0 0 1.2rem;
}

.hp2-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hp2-accent);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--hp2-rule-gold);
  transition: color 0.25s ease, border-color 0.25s ease, gap 0.25s ease;
}
.hp2-link:hover {
  color: var(--hp2-accent-lt);
  border-color: var(--hp2-accent-lt);
  gap: 0.95rem;
}
.hp2-link--muted { color: var(--hp2-text-faint); border-color: var(--hp2-rule); }
.hp2-link--muted:hover { color: var(--hp2-text); border-color: var(--hp2-text-faint); }

.hp2-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 17px 28px;
  border: 1px solid var(--hp2-rule-gold);
  background: rgba(8, 8, 6, 0.4);
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.hp2-cta-arrow { transition: transform 0.3s ease; }
.hp2-cta:hover { transform: translateY(-2px); }
.hp2-cta:hover .hp2-cta-arrow { transform: translateX(4px); }
.hp2-cta--primary {
  background: var(--hp2-accent);
  border-color: var(--hp2-accent);
  color: #0c0b08;
  font-weight: 700;
}
.hp2-cta--primary:hover { background: var(--hp2-accent-lt); border-color: var(--hp2-accent-lt); }
.hp2-cta--ghost { color: var(--hp2-text); }
.hp2-cta--ghost:hover { border-color: var(--hp2-accent); color: var(--hp2-accent-lt); }
.hp2-cta-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* 行数で切り詰める小道具（カードの高さを揃えるため） */
.hp2-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hp2-clamp-2 { -webkit-line-clamp: 2; }
.hp2-clamp-3 { -webkit-line-clamp: 3; }
.hp2-clamp-4 { -webkit-line-clamp: 4; }

/* ════════════════════════════════════════════
   01 — HERO（分割レイアウト）
   ════════════════════════════════════════════ */
.hp2-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 42vw);
  padding-top: 56px;            /* 固定ナビの高さ */
  background: var(--hp2-bg);
}
.hp2-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(44px, 6vw, 80px) clamp(28px, 3.4vw, 56px)
           clamp(44px, 6vw, 80px) var(--hp2-gutter);
}
.hp2-hero-tag {
  font-family: 'Space Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hp2-accent);
  margin-bottom: 1.6rem;
}
.hp2-hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(2.3rem, 4.3vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 1.6rem;
  max-width: 15ch;
  text-wrap: balance;
}
.hp2-hero-lede {
  font-size: clamp(0.98rem, 1.25vw, 1.12rem);
  line-height: 1.8;
  color: rgba(240, 236, 228, 0.82);
  max-width: 46ch;
  margin: 0 0 2.1rem;
}
.hp2-hero .hp2-cta-row { margin-bottom: 2.3rem; }

.hp2-hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(18px, 2.4vw, 34px);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(240, 236, 228, 0.14);
  font-family: 'Space Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hp2-text-faint);
}
.hp2-hero-facts b { color: var(--hp2-text); font-weight: 700; margin-right: 0.45rem; }

/* 写真カラム — 右端まで裁ち落とし */
.hp2-hero-media {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #100e0b;
}
.hp2-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 被写体（Takumi と作り手）がパネル中央〜右に来る位置。
     値を下げるほど被写体は右へ動く。 */
  object-position: 22% center;
  filter: grayscale(12%) contrast(1.04) brightness(0.92);
}
/* 左端の継ぎ目をぼかす。文字の上には重ねない */
.hp2-hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, var(--hp2-bg) 0%, rgba(8,8,6,0.5) 9%, rgba(8,8,6,0) 32%),
    linear-gradient(to bottom, rgba(8,8,6,0.4) 0%, rgba(8,8,6,0) 24%, rgba(8,8,6,0) 66%, rgba(8,8,6,0.78) 100%);
}
.hp2-hero-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 44px clamp(20px, 2.4vw, 32px) clamp(18px, 2.4vw, 28px);
  font-family: 'Space Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(240, 236, 228, 0.62);
  text-align: right;
}

/* ════════════════════════════════════════════
   QUEST カード（Signature Project / Field Stories 共通）
   ════════════════════════════════════════════ */
.hp2-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 26px);
  margin-bottom: clamp(32px, 4vw, 48px);
}
.hp2-card {
  display: flex;
  flex-direction: column;
  background: var(--hp2-bg-card);
  border: 1px solid var(--hp2-rule);
  transition: border-color 0.35s ease, transform 0.35s ease;
}
.hp2-card:hover { border-color: var(--hp2-rule-gold); transform: translateY(-3px); }
.hp2-card-img {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #16140f;
}
.hp2-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(18%) brightness(0.88);
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.5s ease;
}
.hp2-card:hover .hp2-card-img img { transform: scale(1.05); filter: grayscale(0%) brightness(1); }
/* 写真の上に重ねる Quest 番号 — 元デザインの「記録番号」の手触り */
.hp2-card-num {
  position: absolute;
  left: 0; top: 0;
  padding: 7px 12px;
  background: rgba(8, 8, 6, 0.82);
  border-right: 1px solid var(--hp2-rule-gold);
  border-bottom: 1px solid var(--hp2-rule-gold);
  font-family: 'Space Mono', monospace;
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hp2-accent);
}
.hp2-card-body {
  padding: 20px 22px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.hp2-card-tag {
  font-family: 'Space Mono', monospace;
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hp2-text-faint);
  margin-bottom: 0.8rem;
}
.hp2-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.28;
  margin-bottom: 1rem;
}
/* 問い → 現地で分かったこと */
.hp2-qa { margin-bottom: 1.1rem; }
.hp2-qa-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Space Mono', monospace;
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hp2-accent);
  margin-bottom: 0.4rem;
}
.hp2-qa-label::before {
  content: '';
  width: 10px;
  height: 1px;
  background: var(--hp2-rule-gold);
}
.hp2-qa--found .hp2-qa-label { color: var(--hp2-text-faint); }
.hp2-qa--found .hp2-qa-label::before { background: var(--hp2-rule); }
.hp2-qa p {
  margin: 0;
  font-size: 0.83rem;
  line-height: 1.65;
  color: var(--hp2-text-soft);
}
.hp2-card-meta {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: 'Space Mono', monospace;
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hp2-text-faint);
  border-top: 1px solid var(--hp2-rule);
  padding-top: 0.85rem;
}
.hp2-card-meta .hp2-arrow { color: var(--hp2-accent); }

/* カード描画前・JS無効時のプレースホルダ */
.hp2-cards-fallback {
  grid-column: 1 / -1;
  padding: 28px 0;
  font-family: 'Space Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hp2-text-faint);
}

/* ── SIGNATURE PROJECT の見出し周り ── */
.hp2-sig-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: end;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.hp2-sig-aside {
  font-family: 'Space Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  line-height: 2;
  text-transform: uppercase;
  color: var(--hp2-text-faint);
  border-top: 1px solid var(--hp2-rule);
  padding-top: 1.1rem;
}
.hp2-sig-aside b { color: var(--hp2-accent); font-weight: 700; }

/* ════════════════════════════════════════════
   FIELD STORIES
   ════════════════════════════════════════════ */
.hp2-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: clamp(26px, 3.5vw, 40px) 0 clamp(26px, 3.5vw, 36px);
}
.hp2-tab {
  font-family: 'Space Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hp2-text-faint);
  background: transparent;
  border: 1px solid var(--hp2-rule);
  padding: 12px 20px;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.hp2-tab:hover { color: var(--hp2-text); border-color: var(--hp2-text-faint); }
.hp2-tab[aria-selected="true"] {
  color: var(--hp2-accent);
  border-color: var(--hp2-accent);
  background: rgba(201, 168, 76, 0.08);
}

.hp2-stories-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: 1.6rem;
  border-top: 1px solid var(--hp2-rule);
}
.hp2-sublinks {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  font-family: 'Space Mono', monospace;
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hp2-text-faint);
}
.hp2-sublinks a { color: var(--hp2-text-faint); transition: color 0.25s ease; }
.hp2-sublinks a:hover { color: var(--hp2-accent); }

/* ════════════════════════════════════════════
   OPEN CASES
   ════════════════════════════════════════════ */
.hp2-cases-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: end;
  margin-bottom: clamp(32px, 4.5vw, 52px);
}
.hp2-cases {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 20px);
  margin-bottom: clamp(30px, 4vw, 44px);
}
.hp2-case {
  display: flex;
  flex-direction: column;
  background: var(--hp2-bg-card);
  border: 1px solid var(--hp2-rule);
  transition: border-color 0.35s ease, transform 0.35s ease;
}
.hp2-case:hover { border-color: var(--hp2-rule-gold); transform: translateY(-3px); }
.hp2-case-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #16140f; }
.hp2-case-img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(45%) brightness(0.6) contrast(1.1);
  transition: filter 0.5s ease;
}
.hp2-case:hover .hp2-case-img img { filter: grayscale(10%) brightness(0.82); }
.hp2-case-id {
  position: absolute; left: 0; top: 0;
  padding: 6px 11px;
  background: rgba(8, 8, 6, 0.86);
  border-right: 1px solid var(--hp2-rule-gold);
  border-bottom: 1px solid var(--hp2-rule-gold);
  font-family: 'Space Mono', monospace;
  font-size: 0.54rem;
  letter-spacing: 0.18em;
  color: var(--hp2-accent);
}
.hp2-case-badge {
  position: absolute; right: 10px; top: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: rgba(8, 8, 6, 0.86);
  border: 1px solid var(--hp2-rule);
  font-family: 'Space Mono', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  color: var(--hp2-text-faint);
}
.hp2-case-badge--live { color: #e8907f; border-color: rgba(212, 84, 63, 0.5); }
.hp2-case-badge .hp2-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--hp2-live);
  animation: hp2Pulse 1.8s ease-in-out infinite;
}
@keyframes hp2Pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.hp2-case-body { padding: 18px 18px 16px; display: flex; flex-direction: column; flex: 1; }
.hp2-case-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.16rem;
  line-height: 1.28;
  margin-bottom: 0.45rem;
}
.hp2-case-loc {
  font-family: 'Space Mono', monospace;
  font-size: 0.54rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hp2-text-faint);
  margin-bottom: 0.9rem;
}
.hp2-case-clue {
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--hp2-text-soft);
  margin: 0 0 1.1rem;
  padding-left: 0.9rem;
  border-left: 1px solid var(--hp2-rule-gold);
}
.hp2-case-foot {
  margin-top: auto;
  padding-top: 0.8rem;
  border-top: 1px solid var(--hp2-rule);
  font-family: 'Space Mono', monospace;
  font-size: 0.54rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hp2-accent);
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

/* ════════════════════════════════════════════
   THE PERSON
   ════════════════════════════════════════════ */
.hp2-person-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hp2-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--hp2-rule);
  margin: 0;
}
.hp2-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 16%;
  filter: grayscale(22%) contrast(1.06) brightness(0.92);
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hp2-portrait:hover img { transform: scale(1.04); }
.hp2-portrait-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 32px 20px 16px;
  background: linear-gradient(to top, rgba(8,8,6,0.9), transparent);
  font-family: 'Space Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hp2-text-faint);
}

/* Act I–III — mission-briefing.html にある経緯を3行に圧縮したもの */
.hp2-acts {
  list-style: none;
  margin: 2rem 0 1.8rem;
  padding: 0;
  border-top: 1px solid var(--hp2-rule);
}
.hp2-acts li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--hp2-rule);
}
.hp2-act-no {
  font-family: 'Space Mono', monospace;
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hp2-accent);
  line-height: 1.8;
}
.hp2-act-no span { display: block; color: var(--hp2-text-faint); }
.hp2-act-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.hp2-act-text { font-size: 0.86rem; line-height: 1.7; color: var(--hp2-text-soft); margin: 0; }

.hp2-person-quote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.5;
  color: rgba(240, 236, 228, 0.92);
  padding-left: 1.4rem;
  border-left: 1px solid var(--hp2-rule-gold);
  margin: 0 0 2rem;
  max-width: 44ch;
}
.hp2-person-quote cite {
  display: block;
  margin-top: 0.7rem;
  font-family: 'Space Mono', monospace;
  font-style: normal;
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hp2-text-faint);
}
.hp2-inline-links { display: flex; flex-wrap: wrap; gap: 28px; }

/* ════════════════════════════════════════════
   CREDIBILITY
   ════════════════════════════════════════════ */
.hp2-cred-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  margin-bottom: clamp(40px, 5vw, 60px);
}
.hp2-proof {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 10px 22px;
  align-items: baseline;
}
.hp2-proof-cat {
  font-family: 'Space Mono', monospace;
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hp2-accent);
  padding-top: 2px;
}
.hp2-proof-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 0.84rem;
  color: var(--hp2-text-soft);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hp2-rule);
}

.hp2-evidence {
  display: grid;
  /* 現行 index.html の Social Impact 4枚を移設したので4列。 */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 26px);
  margin-bottom: clamp(30px, 4vw, 44px);
}
.hp2-ev {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hp2-rule);
  background: var(--hp2-bg-card);
  transition: border-color 0.35s ease, transform 0.35s ease;
}
.hp2-ev:hover { border-color: var(--hp2-rule-gold); transform: translateY(-3px); }
.hp2-ev-img { aspect-ratio: 16 / 9; overflow: hidden; }
.hp2-ev-img img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 50%;
  filter: grayscale(25%) brightness(0.86);
  transition: filter 0.5s ease, transform 0.8s cubic-bezier(0.2,0.7,0.2,1);
}
.hp2-ev:hover .hp2-ev-img img { filter: grayscale(0%) brightness(1); transform: scale(1.04); }
/* ermita-volunteer.png は 984×1110 の縦長。16/9 の中央切り抜きでは
   顔が上に切れるため、焦点を上へ寄せる。 */
.hp2-ev-img--top img { object-position: 50% 12%; }
.hp2-ev-body { padding: 20px 20px 18px; display: flex; flex-direction: column; flex: 1; }
.hp2-ev-src {
  font-family: 'Space Mono', monospace;
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hp2-accent);
  margin-bottom: 0.8rem;
}
.hp2-ev-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.22rem;
  line-height: 1.32;
  margin-bottom: 0.75rem;
}
.hp2-ev-note {
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--hp2-text-soft);
  margin-bottom: 1.1rem;
}
.hp2-ev-foot {
  margin-top: auto;
  font-family: 'Space Mono', monospace;
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hp2-text-faint);
  border-top: 1px solid var(--hp2-rule);
  padding-top: 0.85rem;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.hp2-ev-foot .hp2-arrow { color: var(--hp2-accent); }
.hp2-note {
  font-size: 0.78rem;
  line-height: 1.75;
  color: var(--hp2-text-faint);
  max-width: 70ch;
  margin-top: 1.4rem;
}

/* ════════════════════════════════════════════
   WORK WITH TAKUMI
   ════════════════════════════════════════════ */
.hp2-work-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.hp2-svc-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hp2-text-faint);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--hp2-rule-gold);
  margin-bottom: 0.4rem;
}
.hp2-svc { list-style: none; margin: 0; padding: 0; }
.hp2-svc li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--hp2-rule);
  align-items: baseline;
}
.hp2-svc-num {
  font-family: 'Space Mono', monospace;
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  color: var(--hp2-accent);
}
.hp2-svc-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
}
.hp2-svc-desc { font-size: 0.84rem; line-height: 1.7; color: var(--hp2-text-soft); margin: 0; }
.hp2-work-cta { margin-top: 2.4rem; }

/* ════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════ */
.hp2-footer {
  /* style.css の `footer { display:flex }` を打ち消す。
     ナビとフッターのために style.css を借りている副作用で、
     指定しないと中身が横1列に並んでしまう。 */
  display: block;
  background: #000;
  border-top: 1px solid var(--hp2-rule-gold);
  padding: clamp(56px, 7vw, 84px) var(--hp2-pad-x) 44px;
  text-align: center;
}
.hp2-footer-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  margin-bottom: 1.2rem;
}
.hp2-footer-rule { width: 40px; height: 1px; background: var(--hp2-accent); margin: 1.2rem auto 1.6rem; }
.hp2-footer-mail {
  font-size: 1.02rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--hp2-text);
}
.hp2-footer-mail:hover { color: var(--hp2-accent-lt); }
.hp2-footer-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 26px;
  margin: 2.6rem 0 2.4rem;
  font-family: 'Space Mono', monospace;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hp2-footer-nav a { color: var(--hp2-text-faint); transition: color 0.25s ease; }
.hp2-footer-nav a:hover { color: var(--hp2-accent); }
.hp2-footer-closing {
  font-family: 'Space Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(240, 236, 228, 0.3);
}

/* ── プレビュー表示用バッジ（本番には存在しない） ───────────── */
.hp2-preview-flag {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 400;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: rgba(8, 8, 6, 0.9);
  border: 1px solid var(--hp2-rule-gold);
  backdrop-filter: blur(8px);
  font-family: 'Space Mono', monospace;
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hp2-text-faint);
}
.hp2-preview-flag a { color: var(--hp2-accent); border-bottom: 1px solid var(--hp2-rule-gold); }
.hp2-preview-flag b { color: var(--hp2-accent); font-weight: 700; }

/* ════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════ */
@media (max-width: 1180px) {
  .hp2-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
  .hp2-cards, .hp2-evidence { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp2-sig-head, .hp2-cases-head { grid-template-columns: 1fr; align-items: start; }
  .hp2-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 38vw); }
  .hp2-hero-media img { object-position: 26% center; }
}

@media (max-width: 860px) {
  /* HERO は縦積み。写真が先、文字が後 */
  .hp2-hero { grid-template-columns: 1fr; min-height: 0; }
  .hp2-hero-media { order: -1; aspect-ratio: 5 / 4; }
  .hp2-hero-media img { object-position: 30% 36%; }
  .hp2-hero-media::after {
    background: linear-gradient(to bottom, rgba(8,8,6,0.28) 0%, rgba(8,8,6,0) 30%, rgba(8,8,6,0.85) 100%);
  }
  .hp2-hero-cap { text-align: left; }
  .hp2-hero-copy { padding: clamp(32px, 7vw, 48px) var(--hp2-pad-x) clamp(44px, 8vw, 64px); }
  .hp2-hero-title { max-width: 18ch; }

  .hp2-person-grid,
  .hp2-cred-grid,
  .hp2-work-grid { grid-template-columns: 1fr; }
  .hp2-portrait { aspect-ratio: 16 / 11; }
  .hp2-portrait img { object-position: 40% 16%; }
}

@media (max-width: 620px) {
  .hp2-cards, .hp2-evidence, .hp2-cases { grid-template-columns: 1fr; }
  .hp2-cta { width: 100%; justify-content: space-between; }
  .hp2-hero-facts { gap: 8px 18px; font-size: 0.56rem; }
  .hp2-proof { grid-template-columns: 1fr; gap: 4px; }
  .hp2-proof-cat { padding-top: 12px; }
  .hp2-acts li { grid-template-columns: 1fr; gap: 6px; }
  .hp2-preview-flag { left: 10px; right: 10px; bottom: 10px; justify-content: center; }
}

/* モバイルのコンパスボタン（nav.js）とプレビューバッジの重なり回避 */
@media (max-width: 768px) {
  .hp2-preview-flag { bottom: 86px; }
}

@media (prefers-reduced-motion: reduce) {
  .hp2 *, .hp2 *::before, .hp2 *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ════════════════════════════════════════════
   QUEST ARCHIVE & FIELD MAP（v3 で追加）

   ここは「全記事の一覧」ではなく入口。件数・カテゴリー内訳・
   Ask the Archive・Browse All Quests だけを置く。
   一覧／検索／カテゴリー絞り込みは /quests/（Quest Map）側に
   既にあるので、トップで二重に持たない。

   この下に contributors.js が本物の Field Map
   （#quest-map-section）を注入する。数字は QUEST_DATA から
   計算されるので、ここでハードコードしない。
   ════════════════════════════════════════════ */
.hp2-arch-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: start;
}
.hp2-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(24px, 4vw, 48px);
  margin: 1.8rem 0 1.6rem;
}
.hp2-stat-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  line-height: 1;
  color: var(--hp2-accent-lt);
}
.hp2-stat-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hp2-text-faint);
  margin-top: 0.5rem;
}
.hp2-stat a { color: var(--hp2-accent); border-bottom: 1px solid var(--hp2-rule-gold); }
.hp2-stat a:hover { color: var(--hp2-accent-lt); }

/* カテゴリー内訳 — 件数は JS が QUEST_DATA から数える */
.hp2-cats { border-top: 1px solid var(--hp2-rule); }
.hp2-cat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hp2-rule);
  font-family: 'Space Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hp2-text-soft);
}
.hp2-cat-row b { color: var(--hp2-accent); font-weight: 700; }
.hp2-cat-row--all { color: var(--hp2-text); }

/* Ask the Archive — 既存の Archive Terminal を開くだけの入口。
   新しいAIチャットは作っていない（nav.js が持っている
   ウィジェットをそのまま呼ぶ）。 */
.hp2-ask {
  border: 1px solid var(--hp2-rule-gold);
  background: rgba(201, 168, 76, 0.04);
  padding: clamp(22px, 2.6vw, 30px);
}
.hp2-ask-eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hp2-accent);
  margin-bottom: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.hp2-ask-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.25;
  margin-bottom: 0.7rem;
}
.hp2-ask-text {
  font-size: 0.86rem;
  line-height: 1.75;
  color: var(--hp2-text-soft);
  margin: 0 0 1.4rem;
}
.hp2-ask-ex {
  font-family: 'Space Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--hp2-text-faint);
  margin: 1.3rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--hp2-rule);
  line-height: 1.9;
}
.hp2-ask-ex span { color: var(--hp2-text-soft); }
/* 役割の違いが分かるように、AIへの質問と通常の一覧/検索は
   並べて別ボタンにする（同じ役割のCTAを増やさない）。 */
.hp2-ask .hp2-cta-row { gap: 12px; }

/* 注入セクション（Field Map / Field Contributors / Open Cases）の
   上下の余白だけ整える。中身のスタイルは既存CSSのまま。 */
.hp2-injected { background: var(--hp2-bg); }
.hp2-injected--alt { background: var(--hp2-bg-alt); }

@media (max-width: 860px) {
  .hp2-arch-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════
   v4 — THE FIELD ARCHIVE の導入ブロック
   旧トップの #quests と同じ仕掛け（背景画像を viewport に固定して
   スクロールで追従させる）をこのセクションに持ち込む。
   画像・フィルター・覆いの数値は css/style.css の .quest-bg /
   .quest-bg-overlay を基にしている（暗すぎたので少しだけ明るい）。
   ════════════════════════════════════════════ */
.hp2-arch-hero { position: relative; overflow: hidden; }
.hp2-arch-bg {
  position: absolute;
  inset: 0;
  background-image: url('../img/IMG_E9357.JPG');
  /* background-attachment:fixed が「スクロールしても追従する」正体。
     セクションの高さが変わっても画像が伸び縮みしない。 */
  background-attachment: fixed;
  background-size: cover;
  background-position: center 25%;
  filter: grayscale(100%) brightness(0.36) contrast(1.05);
  z-index: 0;
  pointer-events: none;
}
.hp2-arch-veil {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 6, 0.74);
  z-index: 1;
  pointer-events: none;
}
.hp2-arch-hero > .hp2-inner { position: relative; z-index: 2; }

.hp2-arch-lede {
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.85;
  color: rgba(240, 236, 228, 0.86);
  max-width: 58ch;
  margin: 0 0 clamp(40px, 5vw, 64px);
}
/* アーカイブ内の小見出し（Quest Archive / Open Cases など） */
.hp2-sublabel {
  font-family: 'Space Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hp2-text-faint);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--hp2-rule-gold);
  margin-bottom: clamp(26px, 3vw, 38px);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.hp2-sublabel b { color: var(--hp2-accent); font-weight: 400; }

/* 本物の Open Case ボード（open-case.js）は、見た目を整理するため
   表示だけ止めている。DOM には残したままなので、手掛かり送信
   モーダルと GAS への送信はこれまでどおり動く
   （下の「Submit a Clue」はこのボードの GENERAL REPORT ボタンを
   そのまま押している）。見出しだけの簡素版に戻したいという
   フィードバックへの対応で、機能は外していない。
   ボードをまた表示したいときは、この1ブロックを消すだけでよい。 */
.hp2-oc-source { display: none; }

/* ════════════════════════════════════════════
   v4 — コントラスト修正

   原因: 基底の `.hp2 a { color: inherit }` は (0,1,1) で、
   `.hp2-cta--primary` などの単一クラス (0,1,0) より強い。
   そのため <a> のボタンや強調リンクが本文色（クリーム）を
   受け継いでしまい、金色の上に淡い文字が乗って読みにくかった。
   ここで要素＋クラスに上げて確実に勝たせる。
   ════════════════════════════════════════════ */
.hp2 a.hp2-cta--primary,
.hp2 button.hp2-cta--primary {
  color: #100d06;
  font-weight: 700;
}
.hp2 a.hp2-cta--primary:hover,
.hp2 button.hp2-cta--primary:hover { color: #0b0905; }
.hp2 a.hp2-cta--ghost { color: var(--hp2-text); }
.hp2 a.hp2-cta--ghost:hover { color: var(--hp2-accent-lt); }
.hp2 a.hp2-link { color: var(--hp2-accent); }
.hp2 a.hp2-link:hover { color: var(--hp2-accent-lt); }
.hp2 a.hp2-link--muted { color: var(--hp2-text-faint); }
.hp2 a.hp2-link--muted:hover { color: var(--hp2-text); }
.hp2 a.hp2-footer-mail { color: var(--hp2-text); }
.hp2 a.hp2-footer-mail:hover { color: var(--hp2-accent-lt); }
.hp2 .hp2-stat a { color: var(--hp2-accent); }
.hp2 .hp2-stat a:hover { color: var(--hp2-accent-lt); }

/* 既存スクリプトが注入するボタンにも同じ問題が出る箇所がある。
   Field Map の VIEW ACTIVE QUESTS は金色の枠＋金文字なので、
   ホバー時に背景が金になったときだけ文字を暗くする。 */
.hp2 .qmap-btn:hover,
.hp2 .qmap-btn:focus-visible { color: #100d06; }

/* ════════════════════════════════════════════
   v4 — モバイルの可読性
   本文とカード内の文字が小さすぎたので、狭い画面でだけ上げる。
   デスクトップの見た目は変えない。
   ════════════════════════════════════════════ */
@media (max-width: 620px) {
  .hp2-lede,
  .hp2-arch-lede { font-size: 1rem; line-height: 1.8; }
  .hp2-card-sub,
  .hp2-qa p,
  .hp2-case-clue,
  .hp2-svc-desc,
  .hp2-ev-note,
  .hp2-act-text,
  .hp2-ask-text { font-size: 0.92rem; line-height: 1.72; }
  .hp2-card-title { font-size: 1.4rem; }
  .hp2-case-title { font-size: 1.28rem; }
  .hp2-qa-label,
  .hp2-card-tag,
  .hp2-card-meta,
  .hp2-case-loc,
  .hp2-case-foot,
  .hp2-ev-src,
  .hp2-ev-foot { font-size: 0.62rem; }
  .hp2-proof-row { font-size: 0.92rem; }
  .hp2-note { font-size: 0.84rem; }
  .hp2-ask-ex { font-size: 0.66rem; line-height: 2; }
  .hp2-svc-name { font-size: 0.9rem; }
  .hp2-cat-row { font-size: 0.7rem; }
  /* iOS Safari は background-attachment:fixed を正しく扱えず、
     拡大や位置ズレが起きる。狭い画面では通常スクロールに戻す。 */
  .hp2-arch-bg { background-attachment: scroll; background-position: center 30%; }
}

/* ════════════════════════════════════════════
   v5 — 漫画タイトルをキャッチフレーズとして置く
   リンクではなく、上の引用を受けた「宣言」として読ませる。
   /manga/ への導線はナビとフッターにあるので失われていない。
   ════════════════════════════════════════════ */
.hp2-manga-line {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.88rem, 1.5vw, 1.08rem);
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.45;
  color: var(--hp2-accent-lt);
  margin: 0 0 2rem;
  padding-left: 1.4rem;        /* 上の引用と左端を揃える */
}

/* ════════════════════════════════════════════
   v5 — スマホのファーストビュー
   写真の上に文字を重ねる（本番トップと同じ見え方）。
   縦積みだと見出しが画面の外に出て、最初の画面で
   「誰が何をしているのか」が見えなかったため。

   被写体は画面の上寄りに、文字は下半分に置き、
   下から立ち上がる暗幕で可読性を確保する。
   ════════════════════════════════════════════ */
@media (max-width: 860px) {
  .hp2-hero {
    display: flex;
    align-items: flex-end;
    min-height: 100svh;
    position: relative;
  }
  /* 写真はヒーロー全体の背面へ。inset:0 は padding box 基準なので
     ナビ用の padding-top 56px の裏まで覆う＝全面に出る。 */
  .hp2-hero-media {
    position: absolute;
    inset: 0;
    order: 0;
    aspect-ratio: auto;
    z-index: 0;
  }
  .hp2-hero-media img {
    /* 値を下げるほど被写体が右へ動く。縦長画面では横が大きく
       切られるので、Takumi が画面に残る位置に寄せている。 */
    object-position: 20% center;
    filter: grayscale(16%) contrast(1.05) brightness(0.82);
  }
  /* 顔が出る上半分は明るく残し、文字が始まる 34% から一気に暗くする。
     ここを緩くすると見出しの上に顔が重なって両方読めなくなる。 */
  .hp2-hero-media::after {
    background:
      linear-gradient(to bottom,
        rgba(8,8,6,0.52) 0%,
        rgba(8,8,6,0.10) 20%,
        rgba(8,8,6,0.30) 32%,
        rgba(8,8,6,0.86) 46%,
        rgba(8,8,6,0.97) 66%,
        rgba(8,8,6,0.99) 100%);
  }
  /* 写真のキャプションは文字と重なるので、この幅では出さない */
  .hp2-hero-cap { display: none; }

  .hp2-hero-copy {
    position: relative;
    z-index: 2;
    justify-content: flex-end;
    padding: clamp(96px, 20vh, 180px) var(--hp2-pad-x) clamp(34px, 6vw, 52px);
  }
  .hp2-hero-title { max-width: 16ch; }
  .hp2-hero-lede { margin-bottom: 1.8rem; }
  .hp2-hero .hp2-cta-row { margin-bottom: 1.8rem; }
  .hp2-hero-facts { padding-top: 1.2rem; }
}

@media (max-width: 620px) {
  .hp2-manga-line { padding-left: 1.2rem; letter-spacing: 0.13em; }

  /* ヒーローの文字の塊を少し低くする。文字は下端に寄せて置いて
     いるので、各要素の余白を詰めるとブロック全体が下がり、
     上半分に写っている人物と重ならなくなる。
     文字そのものは小さくしていない。 */
  .hp2-hero-copy { padding-top: clamp(84px, 16vh, 140px); }
  .hp2-hero-tag { margin-bottom: 1rem; }
  .hp2-hero-title { margin-bottom: 1.1rem; }
  .hp2-hero-lede { font-size: 0.98rem; line-height: 1.7; margin-bottom: 1.4rem; }
  .hp2-hero .hp2-cta-row { gap: 10px; margin-bottom: 1.3rem; }
  .hp2-hero .hp2-cta { padding: 15px 22px; }
  .hp2-hero-facts { padding-top: 1rem; gap: 6px 16px; }
}

/* ════════════════════════════════════════════
   v6 — Recognition & Public Engagements
   現行 index.html の #credentials（"Officially selected.
   Professionally recognised." の年表）を 06 に取り込んだぶんの
   スタイル。中身は index.html にあるものと同じで、
   新しい実績を足していない。
   ════════════════════════════════════════════ */
.hp2-reco { margin-top: clamp(44px, 5vw, 68px); }
.hp2-reco-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--hp2-rule-gold);
  margin-bottom: clamp(24px, 3vw, 34px);
}
.hp2-reco-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.2;
  margin: 0;
}
.hp2-reco-auth {
  font-family: 'Space Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hp2-text-faint);
}

.hp2-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(28px, 4vw, 56px);
}
.hp2-timeline li {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--hp2-rule);
}
.hp2-tl-date {
  font-family: 'Space Mono', monospace;
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hp2-text-faint);
  line-height: 1.7;
}
.hp2-tl-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
}
.hp2-tl-text { font-size: 0.84rem; line-height: 1.7; color: var(--hp2-text-soft); margin: 0; }
/* 最新の1件だけ金で立てる（現行サイトの highlight-gold と同じ扱い） */
.hp2-timeline li.is-latest .hp2-tl-date  { color: var(--hp2-accent); }
.hp2-timeline li.is-latest .hp2-tl-title { color: var(--hp2-accent-lt); }

@media (max-width: 860px) {
  .hp2-timeline { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .hp2-timeline li { grid-template-columns: 1fr; gap: 6px; }
  .hp2-tl-text { font-size: 0.92rem; line-height: 1.72; }
  .hp2-tl-title { font-size: 0.88rem; }
  .hp2-tl-date { font-size: 0.62rem; }
  .hp2-reco-auth { font-size: 0.62rem; }
}

/* ════════════════════════════════════════════
   v6b — Expertise & Languages（復帰用）

   index.html の 06 に、旧トップの #expertise を
   コメントアウトした状態で置いてある。そのコメント記号を外せば
   そのまま表示できるよう、スタイルだけ先に用意している。
   表示していない間も、このCSSは他の要素に一切影響しない
   （.hp2-lang* は他で使っていないため）。
   ════════════════════════════════════════════ */
.hp2-langs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 36px) clamp(28px, 4vw, 56px);
}
.hp2-lang-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0.7rem;
}
.hp2-lang-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem;
  line-height: 1.2;
}
.hp2-lang-level {
  font-family: 'Space Mono', monospace;
  font-size: 0.54rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hp2-accent);
}
.hp2-lang-bar {
  height: 2px;
  background: var(--hp2-rule);
  margin-bottom: 0.9rem;
}
.hp2-lang-bar span {
  display: block;
  height: 100%;
  background: var(--hp2-accent);
}
.hp2-lang-text { font-size: 0.84rem; line-height: 1.7; color: var(--hp2-text-soft); margin: 0; }

@media (max-width: 620px) {
  .hp2-langs { grid-template-columns: 1fr; }
  .hp2-lang-text { font-size: 0.92rem; line-height: 1.72; }
}