/* トップ（/）だけの部品: ヒーロー・4つの柱の帯・天体写真の2点・歴史研究と略歴の並べ方。共通の部品は ../style.css */

.hero-lede, .p-desc { word-break: auto-phrase; }

/* ------------------------------------------------------------ ヒーロー */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: end;
  /* 高さは写真の縦横比（3:2）より縦長にしない。縦長にすると左右が切られ、右の主題が文字の側へ寄る */
  height: clamp(520px, min(calc(100svh - var(--nav-h)), 66vw), 960px);
  background: var(--night); color: var(--tx-d);
}
.hero-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
/* 主題（電波望遠鏡）は右半分。幕は左と下だけに掛け、右の主題には掛けない */
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, color-mix(in oklch, var(--scrim) 72%, transparent) 0%, color-mix(in oklch, var(--scrim) 42%, transparent) 34%, color-mix(in oklch, var(--scrim) 0%, transparent) 52%),
    linear-gradient(to top, color-mix(in oklch, var(--scrim) 70%, transparent) 0%, color-mix(in oklch, var(--scrim) 0%, transparent) 30%);
}
.hero-inner { padding-bottom: clamp(88px, 12vh, 132px); }
/* 文字は左の約46%まで。主題（写真の横 51〜85%）に掛けない */
.hero-inner > * { max-width: 46%; }
.kicker {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--f-label); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--tx-d2);
}
.kicker-rule { width: 40px; height: 1px; background: var(--red); }
.hero h1 { margin-top: 18px; }
.hero-en {
  display: block;
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(3.4rem, 8vw, 7.6rem); line-height: 0.9; letter-spacing: 0.004em;
}
.hero-en > span { display: block; }
.hero-ja {
  display: block; margin-top: 18px;
  font-weight: 700; font-size: clamp(1.15rem, 2vw, 1.6rem); letter-spacing: 0.32em; line-height: 1.3;
}
.hero-inner > .hero-lede {
  max-width: min(46%, 35em); margin-top: 22px;
  font-size: clamp(0.94rem, 1.15vw, 1.04rem); line-height: 1.95; color: var(--tx-hero);
}
.hero-cap {
  position: absolute; left: 0; right: 0; bottom: 20px;
  display: flex; justify-content: flex-end;
  max-width: none;
  font-family: var(--f-label); font-weight: 500; font-size: 0.9rem; letter-spacing: 0.04em; color: var(--tx-d2);
}
.hero-cap a { white-space: nowrap; transition: color 0.2s; }
.hero-cap a:hover { color: var(--tx-d); }
.hero-cap .cap-title { font-family: var(--f-body); font-size: 0.84rem; color: var(--tx-d); }

@media (prefers-reduced-motion: no-preference) {
  .hero-inner > * { animation: rise 1.1s var(--ease) both; }
  .hero-inner > :nth-child(2) { animation-delay: 0.08s; }
  .hero-inner > :nth-child(3) { animation-delay: 0.18s; }
  .hero-img { animation: settle 2.4s var(--ease) both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { transform: scale(1.04); } to { transform: none; } }

/* ------------------------------------------------------------ 4つの柱（各ページへ） */
.pillars { background: var(--night); border-top: 1px solid var(--line-d); }
.pillar-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pillar-list li + li { border-left: 1px solid var(--line-d); }
.pillar-list a {
  display: flex; flex-direction: column; height: 100%;
  padding: 30px clamp(18px, 2vw, 28px) 26px;
  transition: background 0.3s;
}
.pillar-list li:first-child a { padding-left: 0; }
.pillar-list a:hover { background: var(--night-hover); }
.pillar-list li:first-child a:hover { background: none; }
.p-no { font-family: var(--f-label); font-weight: 600; font-size: 0.86rem; letter-spacing: 0.1em; color: var(--red); }
.p-en { margin-top: 20px; font-family: var(--f-display); font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.1; letter-spacing: 0.01em; }
.p-ja { margin-top: 6px; font-weight: 700; font-size: 0.92rem; letter-spacing: 0.14em; color: var(--tx-d2); }
.p-desc { margin-top: 14px; font-size: 0.86rem; line-height: 1.8; color: var(--tx-d2); flex: 1; }
.p-meta {
  margin-top: 20px; padding-top: 10px; border-top: 1px solid var(--line-d);
  font-family: var(--f-label); font-weight: 500; font-size: 0.86rem; letter-spacing: 0.08em; color: var(--tx-d3);
  display: flex; justify-content: space-between;
}
.p-meta::after { content: "→"; font-family: var(--f-body); transition: transform 0.3s var(--ease); }
.pillar-list a:hover .p-meta::after { transform: translateX(4px); color: var(--tx-d); }

/* ------------------------------------------------------------ 天体写真の2点 */
.astro-feature {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto;
  column-gap: var(--col-gap);
}
.af { display: grid; grid-template-rows: subgrid; grid-row: span 2; }
.af--main { grid-column: 1 / span 8; }
.af--side { grid-column: 9 / span 4; }
.af--main .zoom { aspect-ratio: 3 / 2; }
.af--side .zoom img { position: absolute; inset: 0; }

/* ------------------------------------------------------------ 歴史研究（主題と業績を左右に） */
.hist-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.hist-themes { grid-column: 2 / span 5; }
.hist-themes > div { grid-template-columns: 7.5em minmax(0, 1fr); padding: 16px 0; }
.hist-themes dt { font-weight: 700; font-size: 0.88rem; letter-spacing: 0.1em; line-height: 1.9; }
.hist-themes dd { font-size: 0.97rem; line-height: 1.9; }
.works { grid-column: 8 / span 5; }
.works-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.works-head h3 { font-weight: 700; font-size: 1.05rem; letter-spacing: 0.14em; }

/* ------------------------------------------------------------ 略歴（項目と外へのリンクを左右に） */
.bio-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.bio-grid .kv { grid-column: 2 / span 6; }
.bio-grid .link-list { grid-column: 9 / span 4; align-self: start; }

/* ------------------------------------------------------------ 中くらいの画面 */
@media (max-width: 1080px) {
  .hist-themes { grid-column: 2 / -1; }
  .works { grid-column: 2 / -1; margin-top: 48px; }
  .bio-grid .kv { grid-column: 2 / -1; }
  .bio-grid .link-list { grid-column: 2 / -1; margin-top: 40px; }
}

/* ------------------------------------------------------------ ヒーロー（スマホと縦長のタブレット） */
/* 写真を文字の背景にしない。写真（主題ごと）を上に置き、名前と紹介文はその下の黒の面に出す。
   写真は 3:2 のまま全体を見せる（主題を切らない） */
@media (max-width: 860px) {
  .hero { display: flex; flex-direction: column; height: auto; }
  .hero-img { position: static; order: 1; z-index: auto; height: auto; aspect-ratio: 3 / 2; object-position: 50% 70%; }
  .hero-scrim { display: none; }
  .hero-cap { position: static; order: 2; justify-content: flex-start; padding-top: 10px; font-size: 0.84rem; }
  .hero-inner { order: 3; padding-top: 26px; padding-bottom: 52px; border-bottom: 1px solid var(--line-d); }
  .hero-inner > *, .hero-inner > .hero-lede { max-width: none; }
  .hero-inner > .hero-lede { max-width: 35em; }
  .hero h1 { margin-top: 14px; }
  .hero-ja { margin-top: 14px; letter-spacing: 0.24em; }
  .hero-lede { margin-top: 18px; }
}

/* ------------------------------------------------------------ スマホ */
@media (max-width: 760px) {
  .hc-place { display: none; }
  /* 4つの柱の帯は、スマホではメニューと各章の頭と同じ中身になるので出さない */
  .pillars { display: none; }
  .kicker { gap: 10px; letter-spacing: 0.14em; }
  .kicker-rule { width: 24px; }

  .astro-feature { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .af { grid-row: auto; grid-template-rows: auto auto; }
  .af--main, .af--side { grid-column: 1; }
  .af--side { margin-top: 32px; }
  .af--side .zoom { aspect-ratio: 4 / 5; }

  .hist-grid { grid-template-columns: minmax(0, 1fr); }
  .hist-themes, .works { grid-column: 1; }
  .kv.hist-themes > div { grid-template-columns: 6em minmax(0, 1fr); }

  .bio-grid { grid-template-columns: minmax(0, 1fr); }
  .bio-grid .kv, .bio-grid .link-list { grid-column: 1; }
}

/* ------------------------------------------------------------ 旅日記の海外の旅（11-08 オーナー「もっと海外旅行を全面に出して」）。百名山の前に置く */
.ov-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--col-gap); margin-top: 28px; }
.ov-card a {
  position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 4px;
  background: var(--paper-2); color: var(--tx-photo);
}
.ov-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.ov-card a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, color-mix(in oklch, var(--scrim) 84%, transparent) 0%, transparent 60%); }
.ov-card a:hover img { transform: scale(1.05); }
.ov-txt { position: absolute; left: 14px; right: 12px; bottom: 14px; z-index: 1; display: grid; gap: 6px; }
.ov-when { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--tx-hero); }
.ov-when .sep { margin-inline: 0.4em; }
.ov-en { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.1rem, 1.6vw, 1.5rem); line-height: 1.02; letter-spacing: 0.01em; }
.ov-ja { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em; line-height: 1.5; color: var(--tx-hero); word-break: auto-phrase; }
.ov + .hyakumeizan { margin-top: clamp(64px, 8vw, 112px); }
@media (max-width: 1080px) {
  .ov-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ov-txt { left: 10px; right: 8px; bottom: 10px; gap: 4px; }
  .ov-ja { font-size: 0.72rem; }
}