/* astrosp.com 共通の部品（デザイン案A「継承」から）
   旧サイトの らしさ（Astrosp のロゴ・黒のナビ・ゴシック体・Anton の欧文）を残し、
   写真を大きく、文字の階層とグリッドを整える。Bootstrap は使わない。
   このファイルは土台の担当だけが直す。ページ固有の CSS は static/v2/pages/<ページ名>.css に置く（pages/README.md）。
   色と書体はここにあるものだけを使う（足さない）。本文に明朝体・紺〜紫の夜空グラデーション・光るアクセント・ガラス風のカードは使わない。 */

:root {
  /* 黒基調（旧サイトの bg-dark #212529 / #343a40 の系統。純黒は使わない） */
  --night: oklch(0.175 0.006 255);
  --dark: oklch(0.215 0.007 255);
  --dark-2: oklch(0.255 0.008 255);
  --line-d: oklch(0.33 0.008 255);
  --tx-d: oklch(0.955 0.004 85);
  --tx-d2: oklch(0.79 0.008 255);
  --tx-d3: oklch(0.7 0.009 255); /* 小さい文字にも使う。黒の上で 6.5:1 以上 */

  /* 紙（旧サイトの登頂記録の明るい面 #f8f9fa の系統） */
  --paper: oklch(0.968 0.003 85);
  --paper-2: oklch(0.935 0.004 85);
  --line-p: oklch(0.87 0.005 85);
  --tx-p: oklch(0.235 0.008 255);
  --tx-p2: oklch(0.46 0.009 255);
  --tx-p3: oklch(0.5 0.008 255); /* 紙の上で 5.4:1（紙-2 の上で 4.9:1） */

  /* アクセントはロゴの渦の赤（旧サイトの登頂ピンの赤とも同じ系統）。面には使わず、線と番号だけ */
  --red: oklch(0.65 0.2 27); /* 黒の上の小さい番号で 4.9:1 */
  --red-p: oklch(0.54 0.2 27); /* 紙の上の小さい赤の文字用（5.1:1） */
  /* 旧サイトの地図とグラフで「未登頂」に使っていた紺。地図の点にだけ使う */
  --navy: #1a4472;
  /* 地図（static/v2/maps.js が rgb に直して読む）。紙の面の百名山の地図と、黒の面の地球儀 */
  --map-water-p: oklch(0.885 0.016 240);
  --map-relief-p: oklch(0.74 0.012 255);
  --map-land-d: oklch(0.3 0.008 255);
  --map-water-d: oklch(0.2 0.009 255);
  --map-border-d: oklch(0.42 0.01 255);
  --map-route-d: oklch(0.74 0.012 255);
  --map-sky-d: oklch(0.28 0.035 262);
  /* 写真の上の幕と文字（トップのヒーロー・山のカード）。幕は color-mix(in oklch, var(--scrim) 70%, transparent) のように透かして使う */
  --scrim: oklch(0.16 0.006 255);
  --tx-photo: oklch(0.985 0.002 85); /* 山のカードの上の山名 */
  --tx-hero: oklch(0.9 0.005 85); /* ヒーローの紹介文 */
  --night-hover: oklch(0.2 0.007 255); /* 黒の面のホバー（トップの柱の帯） */
  --line-nav: oklch(0.25 0.007 255); /* ナビの下とフッターの上の線 */

  --f-display: "Anton", "Zen Kaku Gothic New", sans-serif;
  --f-label: "Barlow Condensed", "Zen Kaku Gothic New", sans-serif;
  --f-body: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  --gutter: clamp(16px, 4vw, 56px);
  --maxw: 1320px;
  --col-gap: clamp(16px, 2vw, 28px);
  --nav-h: 64px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* 面ごとの文字と罫線（黒の面が既定。.sec--paper / .surface-paper で紙に切り替わる）。新しい部品はこちらを使う */
  --fg: var(--tx-d);
  --fg-2: var(--tx-d2);
  --fg-3: var(--tx-d3);
  --rule: var(--line-d);
  --rule-strong: var(--tx-d3);
  --accent: var(--red);
}
.sec--paper, .surface-paper {
  --fg: var(--tx-p);
  --fg-2: var(--tx-p2);
  --fg-3: var(--tx-p2);
  --rule: var(--line-p);
  --rule-strong: var(--tx-p);
  --accent: var(--red-p);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
/* なめらかなスクロールは、リンクを押したとき（フォーカスがあるとき）だけ。ページ内検索やスクリプトの移動は即座に */
html:focus-within { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--dark);
  color: var(--tx-d);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.85;
  letter-spacing: 0.02em;
  font-feature-settings: "palt" 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
time { font-variant-numeric: tabular-nums; }
.sec-lead p, .page-lead p, .kv dd, .prose p, .spots-head p, .mt-end p, .moved p { word-break: auto-phrase; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--tx-d); color: var(--night); padding: 8px 14px; }
.skip:focus { left: 8px; top: 8px; }
.sep { display: inline-block; margin-inline: 0.55em; opacity: 0.5; }
.nw { white-space: nowrap; }
.ext { display: inline-block; margin-left: 0.3em; font-family: var(--f-body); font-size: 0.85em; }

/* ------------------------------------------------------------ ナビ（旧サイトの黒いバーを引き継ぐ） */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--night);
  border-bottom: 1px solid var(--line-nav);
}
.nav-bar {
  display: flex; align-items: center; gap: clamp(20px, 3vw, 48px);
  height: var(--nav-h);
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.nav-logo { flex: none; margin-left: -4px; }
.nav-logo img { height: 38px; width: auto; }
.nav-menu { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav-main { display: flex; gap: clamp(18px, 2.4vw, 34px); }
.nav-main a {
  position: relative; display: block; padding: 20px 0;
  font-family: var(--f-label); font-weight: 600; font-size: 1.08rem; letter-spacing: 0.03em; line-height: 24px;
  color: var(--tx-d2);
  transition: color 0.2s;
}
.nav-main a:hover, .nav-main a[aria-current] { color: var(--tx-d); }
.nav-main a[aria-current]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 12px; height: 2px; background: var(--red);
}
.nav-ja { display: none; }
.nav-ext { display: flex; gap: 22px; }
.nav-ext a { font-family: var(--f-label); font-weight: 500; font-size: 0.98rem; letter-spacing: 0.03em; color: var(--tx-d3); transition: color 0.2s; }
.nav-ext a:hover { color: var(--tx-d); }
.nav-toggle {
  display: none; margin-left: auto;
  align-items: center; gap: 10px; height: 44px; padding: 0 2px 0 10px;
  background: none; border: 0; color: var(--tx-d); cursor: pointer;
  font-family: var(--f-label); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.nav-toggle-lines, .nav-toggle-lines::before, .nav-toggle-lines::after {
  display: block; width: 22px; height: 2px; background: currentColor; transition: transform 0.3s var(--ease), opacity 0.2s;
}
.nav-toggle-lines { position: relative; order: 2; }
.nav-toggle-lines::before, .nav-toggle-lines::after { content: ""; position: absolute; left: 0; }
.nav-toggle-lines::before { top: -7px; }
.nav-toggle-lines::after { top: 7px; }
.is-open .nav-toggle-lines { background: transparent; }
.is-open .nav-toggle-lines::before { transform: translateY(7px) rotate(45deg); }
.is-open .nav-toggle-lines::after { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------------------ ボタンと文字のリンク */
.sec-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 20px 12px 22px;
  font-family: var(--f-body); font-weight: 500; font-size: 0.92rem; letter-spacing: 0.04em; line-height: 1.4;
  background: var(--tx-d); color: var(--night);
  border: 1px solid var(--tx-d); border-radius: 2px;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.btn:hover { background: transparent; color: var(--tx-d); }
.btn--ghost { background: transparent; color: var(--tx-d); border-color: var(--line-d); }
.btn--ghost:hover { border-color: var(--tx-d); }
.sec--paper .btn, .surface-paper .btn { background: var(--tx-p); color: var(--paper); border-color: var(--tx-p); }
.sec--paper .btn:hover, .surface-paper .btn:hover { background: transparent; color: var(--tx-p); }
.sec--paper .btn--ghost, .surface-paper .btn--ghost { background: transparent; color: var(--tx-p); border-color: var(--line-p); }
.sec--paper .btn--ghost:hover, .surface-paper .btn--ghost:hover { border-color: var(--tx-p); }
/* 下線つきの文字のリンク（「地図とルート →」など） */
.text-link, .hm-more {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-end;
  padding-bottom: 3px; border-bottom: 1px solid var(--rule-strong);
  font-weight: 500; font-size: 0.9rem; letter-spacing: 0.06em; white-space: nowrap;
  transition: border-color 0.2s, color 0.2s;
}
.text-link span, .hm-more span { transition: transform 0.3s var(--ease); }
.text-link:hover, .hm-more:hover { border-color: var(--accent); }
.text-link:hover span, .hm-more:hover span { transform: translateX(3px); }
/* 文の中のリンク */
.inline-link { border-bottom: 1px solid var(--rule-strong); transition: border-color 0.2s; }
.inline-link:hover { border-color: var(--accent); }
/* researchmap への誘導の札（v2/parts/researchmap.html。/history/ の頭） */
.rm-card {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 20px; align-items: end;
  margin-top: 28px; padding: 18px 0; max-width: 34em;
  border: 1px solid var(--rule-strong); border-left: 0; border-right: 0;
  transition: border-color 0.25s, background 0.25s;
}
.rm-k { grid-column: 1 / -1; font-family: var(--f-label); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.rm-t { font-weight: 500; font-size: 1.02rem; line-height: 1.7; color: var(--fg); }
.rm-u { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-label); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.04em; color: var(--fg-2); white-space: nowrap; }
.rm-go { display: inline-block; font-size: 1.15rem; color: var(--fg); transition: transform 0.3s var(--ease); }
.rm-card:hover { border-color: var(--accent); }
.rm-card:hover .rm-go { transform: translate(3px, -3px); }
@media (max-width: 760px) {
  .rm-card { grid-template-columns: 1fr; padding: 16px 0; }
}

/* ------------------------------------------------------------ 章（番号・欧文・和文・導入） */
.sec { padding-block: clamp(72px, 9vw, 136px); }
.sec--dark { background: var(--dark); color: var(--tx-d); }
.sec--night { background: var(--night); color: var(--tx-d); }
.sec--paper { background: var(--paper); color: var(--tx-p); }
.sec--flush { padding-top: 0; }
.sec-head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start;
  padding-top: 22px; border-top: 1px solid var(--line-d);
  margin-bottom: clamp(40px, 5vw, 72px);
}
.sec--paper .sec-head { border-top-color: var(--tx-p); }
.sec-no { grid-column: 1 / span 1; font-family: var(--f-label); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.1em; color: var(--red); line-height: 1.6; }
.sec-head h2 { grid-column: 2 / span 6; }
.sec--paper .sec-no { color: var(--red-p); }
.sec-en { display: block; font-family: var(--f-display); font-weight: 400; font-size: clamp(2.2rem, 4.9vw, 4.4rem); line-height: 0.95; letter-spacing: 0.005em; }
.sec-ja { display: block; margin-top: 14px; font-weight: 700; font-size: 1rem; letter-spacing: 0.2em; line-height: 1.5; }
.sec--dark .sec-ja, .sec--night .sec-ja { color: var(--tx-d2); }
.sec--paper .sec-ja { color: var(--tx-p2); }
.sec-lead { grid-column: 8 / span 5; padding-top: 4px; }
.sec-lead p { max-width: 32em; line-height: 1.95; }

/* ------------------------------------------------------------ ページの頭（パンくず・大きな欧文の題・導入）。トップ以外の全ページ */
.page-head { background: var(--dark); color: var(--tx-d); padding: clamp(48px, 7vw, 104px) 0 clamp(48px, 6vw, 88px); }
.page-head.surface-paper { background: var(--paper); color: var(--tx-p); }
.page-head-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
.page-title { grid-column: 1 / span 7; }
.crumbs { display: flex; flex-wrap: wrap; font-family: var(--f-label); font-weight: 600; font-size: 0.84rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); }
.crumbs a { color: var(--fg-2); }
.crumbs a:hover { color: var(--fg); }
.crumbs span { margin-inline: 0.7em; }
.page-title h1 { margin-top: 18px; }
.page-title .sec-en { font-size: clamp(2.3rem, 6.6vw, 6.4rem); line-height: 0.9; }
.page-title .sec-ja { margin-top: 18px; color: var(--fg-2); }
.page-lead { grid-column: 8 / span 5; }
.page-lead > p:first-child { line-height: 1.95; }
.page-lead .kv { margin-top: 22px; }

/* 地の文（研究の紹介・略歴など）。1行の長さを抑える */
.prose { max-width: 36em; }
.prose p { line-height: 2; }
.prose p + p { margin-top: 1.2em; }

/* ------------------------------------------------------------ 写真（押すと少し寄る）と添え書き */
.zoom { position: relative; display: block; overflow: hidden; background: var(--night); }
.zoom img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease), opacity 0.3s; }
.zoom:hover img { transform: scale(1.025); }
.cap { display: grid; gap: 2px; padding-top: 14px; }
.cap-title { font-weight: 700; font-size: 1rem; letter-spacing: 0.04em; }
.cap-meta { font-family: var(--f-label); font-weight: 500; font-size: 0.92rem; letter-spacing: 0.04em; color: var(--fg-3); }

/* ------------------------------------------------------------ 項目と値の行（略歴・研究の主題・撮影データ）。黒と紙のどちらの面でも使える */
.kv { border-bottom: 1px solid var(--rule); }
.kv > div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 16px; padding: 18px 0; border-top: 1px solid var(--rule); }
.kv dt { font-size: 0.85rem; letter-spacing: 0.16em; color: var(--fg-3); line-height: 1.95; }
.kv dd { font-size: 1rem; line-height: 1.95; }
.kv a { border-bottom: 1px solid var(--fg-3); transition: border-color 0.2s; }
.kv a:hover { border-color: var(--accent); }
.kv--tight > div { grid-template-columns: 7em minmax(0, 1fr); padding: 9px 0; gap: 12px; }
.kv--tight dt { font-family: var(--f-label); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.9; }
.kv--tight dd { font-size: 0.92rem; line-height: 1.75; }

/* ------------------------------------------------------------ 外へのリンクの一覧（StarryPocket・Instagram） */
.link-list { border-bottom: 1px solid var(--rule); }
.link-list a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px;
  padding: 16px 0; border-top: 1px solid var(--rule); transition: color 0.2s;
}
.link-list span:first-child { font-weight: 700; font-size: 0.98rem; letter-spacing: 0.04em; }
.link-list small { grid-row: 2; font-family: var(--f-label); font-weight: 500; font-size: 0.86rem; letter-spacing: 0.03em; color: var(--fg-3); overflow-wrap: anywhere; }
.link-list .ext { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 1.1rem; transition: transform 0.3s var(--ease); }
.link-list a:hover .ext { transform: translate(2px, -2px); color: var(--accent); }

/* ------------------------------------------------------------ 業績の表（トップと歴史研究のページ） */
.works-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.works-table th {
  text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--rule-strong);
  font-family: var(--f-body); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.12em; color: var(--fg-2);
}
.works-table th:first-child, .works-table td:first-child { width: 4.5em; }
.works-table th:nth-child(2), .works-table td:nth-child(2) { width: 6em; }
.works-table td { padding: 15px 12px 15px 0; border-bottom: 1px dashed var(--rule); vertical-align: top; line-height: 1.75; }
.works-table td:first-child { font-family: var(--f-label); font-weight: 600; font-size: 1rem; letter-spacing: 0.03em; white-space: nowrap; } /* 「2024.11 –」を折らない */
.works-table td:nth-child(2) { font-size: 0.86rem; color: var(--fg-2); }
.w-title { display: block; font-weight: 500; overflow-wrap: anywhere; }
.w-venue, .w-status { display: block; margin-top: 4px; font-size: 0.84rem; color: var(--fg-2); }

/* ------------------------------------------------------------ 日本百名山（紙の面で使う。トップ・旅日記・百名山のページ） */
.hm-head {
  display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px 40px;
  padding-bottom: 16px; border-bottom: 1px solid var(--tx-p);
}
.hm-head h2, .hm-head h3, .spots-head h3 { font-weight: 700; font-size: clamp(1.35rem, 2vw, 1.7rem); letter-spacing: 0.12em; line-height: 1.3; }
.hm-en { display: block; margin-bottom: 6px; font-family: var(--f-label); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tx-p2); }
.hm-stats { display: flex; flex-wrap: wrap; gap: 12px 36px; }
.hm-stats > div { display: grid; gap: 2px; }
.hm-stats dt { font-size: 0.78rem; letter-spacing: 0.16em; color: var(--tx-p2); }
.hm-stats dd { font-family: var(--f-label); font-weight: 600; font-size: 1.1rem; letter-spacing: 0.03em; line-height: 1.3; }
.hm-stats strong { font-family: var(--f-display); font-weight: 400; font-size: 1.9rem; color: var(--red-p); letter-spacing: 0.01em; line-height: 1; margin-inline: 3px 1px; }

/* 旧 /hiking/ の地図を引き継ぐ: 経緯度に点を打つ（赤＝登頂・紺＝未踏）＋地域ごとの登った山 */
.hm-board {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap);
  align-items: start; margin-top: 28px;
}
.hm-map { grid-column: 1 / span 5; }
/* 地図（Mapbox GL）が読めたら、SVG の点の図の上に重ねて差し替える。読めるまで・読めないときは SVG のまま */
.hm-frame { position: relative; }
/* .hm-frame を前に付けて強くする（Mapbox の CSS の .mapboxgl-map { position: relative } に負けて高さ 0 になっていた） */
.hm-frame .hm-gl { position: absolute; inset: 0; opacity: 0; pointer-events: none; border: 1px solid var(--line-p); transition: opacity 0.6s var(--ease); }
.hm-map.is-gl .hm-gl { opacity: 1; pointer-events: auto; }
.hm-map.is-gl .hm-svg { visibility: hidden; }
.hm-gl-note { display: none; margin-left: auto; }
.hm-map.is-gl .hm-grid-note { display: none; }
.hm-map.is-gl .hm-gl-note { display: inline; }
/* 地図の上の小さな札（百名山の山名・地球儀） */
.map-tip .mapboxgl-popup-content {
  padding: 6px 10px; border-radius: 3px; background: var(--tx-p); color: var(--paper);
  font-family: var(--f-body); font-size: 0.8rem; letter-spacing: 0.04em; box-shadow: none;
}
.map-tip .mapboxgl-popup-tip { border-top-color: var(--tx-p); border-bottom-color: var(--tx-p); }
.hm-svg { display: block; width: 100%; height: auto; background: var(--paper-2); border: 1px solid var(--line-p); }
.hm-svg .grat line { stroke: var(--line-p); stroke-width: 1; }
.hm-svg .grat-l text { fill: var(--tx-p2); font-family: var(--f-label); font-weight: 500; font-size: 13px; letter-spacing: 0.04em; }
.hm-svg .pin-off { fill: var(--navy); opacity: 0.82; }
.hm-svg .pin-on { fill: var(--red); stroke: var(--paper); stroke-width: 1.6; transition: stroke 0.2s; }
.hm-svg a:hover .pin-on, .hm-svg a:focus-visible .pin-on { stroke: var(--tx-p); stroke-width: 2.4; }
.hm-svg a:focus-visible { outline: none; }
.hm-legend {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding-top: 10px;
  font-size: 0.8rem; color: var(--tx-p2);
}
.key { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--navy); margin-left: 12px; }
.key:first-child { margin-left: 0; }
.key.on { width: 12px; height: 12px; background: var(--red); }
.hm-grid-note { margin-left: auto; font-family: var(--f-label); font-weight: 500; letter-spacing: 0.04em; }

.hm-areas { grid-column: 7 / span 6; }
.hm-areas-h, .area-list li {
  display: grid; grid-template-columns: 7.4em 3.6em minmax(0, 1fr); column-gap: 14px; align-items: baseline;
}
.hm-areas-h { padding-bottom: 8px; border-bottom: 1px solid var(--tx-p); font-size: 0.78rem; letter-spacing: 0.16em; color: var(--tx-p2); }
.area-list li { padding: 9px 0; border-bottom: 1px solid var(--line-p); }
.area-name { font-weight: 500; font-size: 0.88rem; letter-spacing: 0.06em; }
.area-n { font-family: var(--f-label); font-weight: 600; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.area-n small { margin-left: 1px; font-size: 0.82rem; font-weight: 500; color: var(--tx-p2); }
.area-mts { display: flex; flex-wrap: wrap; gap: 2px 16px; font-size: 0.92rem; line-height: 1.7; }
.area-mts a { border-bottom: 1px solid var(--line-p); transition: border-color 0.2s; }
.area-mts a:hover { border-color: var(--red-p); }
.area-mts .none { color: var(--tx-p3); }
.zero .area-name, .zero .area-n { color: var(--tx-p2); }

/* 山のカード: 旧サイトのカードと同じく、山名と標高を写真の上に白で載せる（v2/parts/mt_card.html） */
.mt-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense;
  gap: 28px var(--col-gap); margin-top: clamp(48px, 5vw, 72px);
}
.mt-card { display: flex; flex-direction: column; height: 100%; }
.mt-img { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: var(--paper-2); }
.mt-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.mt-card:hover .mt-img img { transform: scale(1.03); }
.mt-over {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; justify-items: center; padding: 40px 10px 11px; text-align: center;
  color: var(--tx-photo);
  background: linear-gradient(to top, color-mix(in oklch, var(--scrim) 68%, transparent), color-mix(in oklch, var(--scrim) 30%, transparent) 55%, color-mix(in oklch, var(--scrim) 0%, transparent));
}
.mt-name { font-weight: 700; font-size: 1.12rem; letter-spacing: 0.08em; line-height: 1.35; }
.mt-elev { font-family: var(--f-label); font-weight: 500; font-size: 0.92rem; letter-spacing: 0.05em; line-height: 1.35; }
.mt-sub {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 0 8px; border-bottom: 1px solid var(--line-p);
  font-family: var(--f-label); font-weight: 500; font-size: 0.9rem; letter-spacing: 0.03em; line-height: 1.5; color: var(--tx-p2);
}
.mt-no { font-weight: 600; font-size: 0.86rem; letter-spacing: 0.06em; color: var(--tx-p); }
.mt-meta { flex: 1; min-width: 0; }
.mt-meta .sep { margin-inline: 0.4em; }
.mt-go { font-family: var(--f-body); transition: transform 0.3s var(--ease), color 0.2s; }
.mt-card:hover .mt-go { transform: translateX(3px); color: var(--red-p); }
.mt-card:hover .mt-sub { border-color: var(--tx-p); }
.mt--lead { grid-column: span 2; grid-row: span 2; }
.mt--lead .mt-img { flex: 1; aspect-ratio: auto; min-height: 0; }
.mt--lead .mt-img img { position: absolute; inset: 0; }
.mt--lead .mt-over { padding: 80px 16px 18px; }
.mt--lead .mt-name { font-size: clamp(1.5rem, 2.4vw, 2.1rem); letter-spacing: 0.1em; }
.mt--lead .mt-elev { font-size: 1.15rem; }
.mt-end {
  grid-column: span 2; align-self: end;
  padding-top: 14px; border-top: 1px solid var(--tx-p);
  font-size: 0.86rem; line-height: 1.85; color: var(--tx-p2);
}
.mt-end-h { margin-bottom: 4px; font-weight: 700; font-size: 0.86rem; letter-spacing: 0.14em; color: var(--tx-p); }

/* ------------------------------------------------------------ 観測地の一覧（紙の面で使う） */
.spots {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap);
  margin-top: clamp(72px, 9vw, 128px); padding-top: 16px; border-top: 1px solid var(--tx-p);
}
.spots-head { grid-column: 1 / span 4; }
.spots-head p { margin-top: 14px; max-width: 22em; font-size: 0.92rem; line-height: 1.9; color: var(--tx-p2); }
.spots-head .text-link { margin-top: 18px; }
.loc-list { grid-column: 5 / span 8; columns: 2; column-gap: clamp(24px, 3vw, 48px); }
.loc-list li {
  display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto; align-items: baseline; column-gap: 8px; row-gap: 1px;
  padding: 10px 0; border-bottom: 1px solid var(--line-p); break-inside: avoid;
}
.loc-no { font-family: var(--f-label); font-weight: 600; font-size: 0.86rem; color: var(--tx-p2); font-variant-numeric: tabular-nums; }
.loc-name { font-weight: 500; font-size: 0.92rem; line-height: 1.6; word-break: auto-phrase; }
.loc-pref { grid-column: 3; text-align: right; font-size: 0.8rem; color: var(--tx-p2); white-space: nowrap; }
.loc-note { grid-column: 2 / -1; font-size: 0.84rem; line-height: 1.75; color: var(--tx-p2); word-break: auto-phrase; }
.loc-flag {
  display: inline-block; margin-right: 8px; vertical-align: 1px;
  font-size: 0.72rem; letter-spacing: 0.08em; line-height: 1; padding: 3px 6px 2px;
  border: 1px solid var(--tx-p3); color: var(--tx-p2);
}
.loc-name .loc-flag { margin: 0 0 0 8px; }
.unseen .loc-name { color: var(--tx-p2); }

/* ------------------------------------------------------------ 転送ページ・見つからないページ */
.moved { min-height: calc(100svh - var(--nav-h) - 240px); }
.moved h1 { margin-top: 18px; font-weight: 700; font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: 0.08em; line-height: 1.5; }
.moved p:not(.crumbs):not(.sec-links) { margin-top: 16px; max-width: 34em; line-height: 1.95; color: var(--tx-d2); }
.moved .sec-links a { overflow-wrap: anywhere; }

/* ------------------------------------------------------------ フッター */
.site-foot { background: var(--night); color: var(--tx-d2); padding: 56px 0 44px; border-top: 1px solid var(--line-nav); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1.3fr 1.2fr; gap: 32px var(--col-gap); align-items: start; }
/* 旧トップの中央にあった文字入りのロゴ（渦＋Astronomy Salvage Project）をそのまま置く */
.foot-brand img { height: 140px; width: auto; margin: -14px 0 -10px -4px; }
.foot-links { display: grid; gap: 6px; font-family: var(--f-label); font-weight: 500; font-size: 1rem; letter-spacing: 0.03em; }
.foot-links a { transition: color 0.2s; }
.foot-links a:hover { color: var(--tx-d); }
.foot-copy { text-align: right; font-family: var(--f-label); font-weight: 500; font-size: 0.86rem; letter-spacing: 0.06em; color: var(--tx-d3); line-height: 1.7; }

/* ------------------------------------------------------------ 中くらいの画面 */
@media (max-width: 1080px) {
  .nav-ext { display: none; }
  .sec-head h2 { grid-column: 2 / span 11; }
  .sec-lead { grid-column: 2 / span 11; margin-top: 24px; }
  .page-title, .page-lead { grid-column: 1 / -1; }
  .page-lead { margin-top: 32px; }
  .hm-map { grid-column: 1 / span 6; }
  .hm-areas { grid-column: 7 / span 6; }
  .hm-areas-h, .area-list li { grid-template-columns: 6.4em 3em minmax(0, 1fr); column-gap: 10px; }
  .mt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spots-head { grid-column: 1 / -1; }
  .loc-list { grid-column: 1 / -1; margin-top: 24px; }
}

/* ------------------------------------------------------------ スマホ */
@media (max-width: 760px) {
  :root { --nav-h: 58px; }
  .nav-logo img { height: 32px; }
  .nav-toggle { display: inline-flex; }
  .nav-menu {
    display: none;
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    max-height: calc(100svh - var(--nav-h)); overflow-y: auto;
    padding: 4px var(--gutter) 24px;
    background: var(--night); border-bottom: 1px solid var(--line-d);
  }
  .is-open .nav-menu { display: flex; }
  .nav-main { flex-direction: column; gap: 0; }
  .nav-main li { border-bottom: 1px solid var(--line-d); }
  .nav-main a { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0; font-size: 1.3rem; }
  .nav-main a[aria-current]::after { left: -12px; right: auto; top: 22px; bottom: auto; width: 4px; height: 14px; }
  .nav-ja { display: inline; font-family: var(--f-body); font-weight: 500; font-size: 0.86rem; letter-spacing: 0.12em; color: var(--tx-d3); }
  .nav-ext { display: flex; gap: 24px; padding-top: 18px; }
  .nav-ext a { font-size: 1.05rem; }

  /* 欧文の大見出しは 320px でも1行に収まる大きさまで縮める（Anton が届く前の代わりの書体でも。いちばん長いのは Astrophotography） */
  .sec-en { font-size: min(2.2rem, 9.6vw); }
  .page-title .sec-en { font-size: min(2.3rem, 9.6vw); }

  .sec-head { grid-template-columns: minmax(0, 1fr); }
  .sec-no, .sec-head h2, .sec-lead { grid-column: 1; }
  .sec-head h2 { margin-top: 10px; }
  .sec-lead { margin-top: 20px; }

  .kv:not(.kv--tight) > div { grid-template-columns: 4.5em minmax(0, 1fr); }
  /* 業績の表は、年と種別を1行目に、題を2行目に置く（3列だと種別と題が細く折れる） */
  .works-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .works-table, .works-table tbody { display: block; }
  .works-table tbody { border-top: 1px solid var(--rule-strong); }
  .works-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px dashed var(--rule); }
  .works-table td { display: block; width: auto !important; padding: 0; border: 0; }
  .works-table td:nth-child(3) { grid-column: 1 / -1; margin-top: 6px; }

  .hm-head { gap: 16px 28px; }
  .hm-board { grid-template-columns: minmax(0, 1fr); margin-top: 20px; }
  .hm-map, .hm-areas { grid-column: 1; }
  .hm-areas { margin-top: 32px; }
  .hm-areas-h, .area-list li { grid-template-columns: 5.8em 2.9em minmax(0, 1fr); column-gap: 10px; }
  .area-name { font-size: 0.82rem; letter-spacing: 0.02em; }
  .area-mts { gap: 0 12px; font-size: 0.88rem; }
  .mt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; margin-top: 44px; }
  .mt--lead { grid-row: auto; }
  .mt--lead .mt-img { flex: none; aspect-ratio: 3 / 2; }
  .mt-over { padding: 30px 6px 8px; }
  .mt-name { font-size: 0.98rem; letter-spacing: 0.04em; }
  .mt-elev { font-size: 0.84rem; }
  .mt--lead .mt-over { padding: 48px 12px 12px; }
  .mt-sub { flex-wrap: wrap; gap: 0 8px; font-size: 0.82rem; }
  .mt-no { font-size: 0.8rem; }
  .mt-meta { flex: none; order: 3; width: 100%; }
  .mt-meta .sep { margin-inline: 0.25em; }
  .mt-go { margin-left: auto; }

  .spots { grid-template-columns: minmax(0, 1fr); }
  .loc-list { columns: 1; }

  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand img { height: 120px; }
  .foot-brand { grid-column: 1 / -1; }
  .foot-copy { grid-column: 1 / -1; text-align: left; }
}