/* ============================================================
   components.css — 格子の上に載る部品
   ・トップの全画面スライド（.stage）
   ・作品グリッド（.grid / .card）
   ・記録画像のギャラリー（.gal）
   ============================================================ */

/* ============================================================
   トップの全画面スライド（2026-08-14：上下2段。外側の余白は廃止）
   上段（画面の5/6・等倍）と下段（画面の1/6・等倍）を
   縦に積み上げる。段の間、および個々の画像の左右は、サイトの罫線と同じ
   1px・var(--line) で区切る（ナビや作品グリッドと同じ格子の考え方）。
   同じ並びの画像を横に流す。並び順は hero.js が毎回ランダムに変える。

   下段の写真だけ、中央にタイトル（和英）を表示し、黒を70%かぶせる
   （マウスオンで20%に軽くする。タイトルを読みやすくするための地色）。
   上段はタイトルなし・veilなし。

   上段は読み込み時に1枚目の左端が画面の左端に来るように、下段は
   継ぎ目が画面中央に来るように、それぞれ別のシフトで動く（下記 @keyframes）。

   flex:1 の入れ子内では height の % 指定が確定値として解決されないことが
   あった（黒一色になる不具合が実際に発生した）ため、flex-grow の比率
   （上段5：下段1＝6分割、下段=1/6）で組む。
   ============================================================ */

.stage {
  position: relative;
  flex: 1;
  min-height: 320px;
  overflow: hidden;
  background: var(--stage);
  display: flex;
  flex-direction: column;
}

.stage-row--top     { flex: 5 0 0; min-height: 0; border-bottom: 1px solid var(--line); }
.stage-row--bottom  { flex: 1 0 0; min-height: 0; }

.stage-row {
  position: relative;
  overflow: hidden;
}

/* 2026-08-16：上段に重ねていたドットパターン（＋白5%レイヤー）は撤去した。
   モニターの解像度・視聴環境によって「粒として見える／単なる黒トーンに
   見える」の差が大きく、見え方が安定しなかったため。
   （経緯：#hero-track-top に付けて画像と一緒にスライドさせる→サブピクセル位置で
   チラつく→.stage-row--top側の静止オーバーレイに変更→間隔やドット径を
   2px〜4pxの間で何度か調整→最終的に環境差が大きすぎるとの判断で撤去） */

.track {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  align-items: center; /* 上段の拡大画像は行の高さでクリップされ、縦中央が見える */
  width: max-content;
  animation: pan var(--pan-duration) linear infinite;
  will-change: transform;
  /* Safari で合成レイヤーへ確実に昇格させるための昔からの定番の指定
     （2026-08-17、Safariのカクつき対策として追加）。will-change だけでは
     Safari が Chrome ほど積極的にレイヤー昇格してくれないことがある。 */
  backface-visibility: hidden;
}

.track img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
}

/* track の直接の子（上段は .hero-frame、下段は .hero-photo）だけ縮めない。 */
.track > .hero-frame,
.track > .hero-photo {
  flex-shrink: 0;
}

/* 画像どうしの境目の罫線。border-right だと、隣の画像の box の境界と
   1px 単位でぶつかり合い、丸め誤差でどちらが上に描かれるかが揺れて
   （下段では黒い veil の下に隠れて）見えなくなることがあった。
   veil より確実に手前に出るよう、要素の内側に絶対配置の縦線として描く。 */
.hero-frame,
.hero-photo {
  position: relative;
  height: 100%;
}

/* 下段の写真は作品ページへのリンク（<a>）になる。下線・ホバー反転は
   base.css の a 共通スタイルを打ち消し、veil の opacity 変化だけに任せる。 */
.hero-photo {
  text-decoration: none;
}

.hero-photo:hover,
.hero-photo:focus-visible {
  background: none;
  color: inherit;
}

/* img は既定でドラッグ可能なため、トラックパッドなどで少しドラッグ気味に
   動かしただけでもブラウザ自身の画像ドラッグ操作が始まり、その間だけ
   body の cursor:none が効かずOS標準のカーソルが一瞬見えてしまっていた
   （鳥のカーソルと一緒にカーソルが現れる、という指摘の原因。draggable 属性
   （index.njk・hero.js 側）と合わせて二重に禁止する。2026-08-17 追加）。 */
.hero-frame img,
.hero-photo img {
  -webkit-user-drag: none;
  user-select: none;
}

.hero-frame::after,
.hero-photo::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
  z-index: 5; /* track（画像）より確実に上に出す */
}

/* --- 下段の写真：中央にタイトル、黒70%（ホバーで20%） --------- */

.hero-photo__veil {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0.7;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.hero-photo:hover .hero-photo__veil {
  opacity: 0.2;
}

.hero-photo__title {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 20px;
  text-align: center;
  pointer-events: none;
}

/* 写真の幅より長いタイトルは、はみ出して隣の写真にかかってしまっていた。
   1行のまま、収まらない分は「…」で省略する。
   flex の子はデフォルトで「中身より縮まない」ため、min-width: 0 で
   縮められるようにしないと text-overflow が効かない（よくある落とし穴）。 */
.hero-photo__title-en,
.hero-photo__title-ja {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hero-photo__title-en {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 11px; /* 2026-08-16: 13px → -2px */
  letter-spacing: 0.04em;
}

.hero-photo__title-ja {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 12px; /* 2026-08-16: 14px → -2px */
  color: var(--ink);
}

/* 上段：読み込み時に1枚目の左端が画面の左端に来るよう、シフトなし。
   動く量は1セットぶん（33.3333%）で、そのまま2セット目の頭に着地する。 */
@keyframes pan {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.3333%); }
}

/* 下段だけ、画面幅の半分（50vw）ずらして継ぎ目を画面中央に持ってくる
   （3セットのうち真ん中のセットの頭を基準にする＝-33.3333%）。 */
.stage-row--bottom .track {
  animation-name: pan-centered;
}

@keyframes pan-centered {
  from { transform: translateX(calc(-33.3333% + 50vw)); }
  to   { transform: translateX(calc(-66.6667% + 50vw)); }
}

/* 動きを減らす設定の人には動かさない */
@media (prefers-reduced-motion: reduce) {
  .track { animation: none; }
}

.stage__hint {
  position: absolute;
  right: 14px;
  bottom: 12px;
  font-size: var(--size-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

/* ============================================================
   作品グリッド
   1:1（正方形）に切り、黒を 55% かぶせる。ホバーで黒が外れる。
   作品ごとの明度差を揃えるための処理（decisions.md 第5節。
   2026-08-15：4:3 → 1:1 に変更。サムネイルガイド画像が正方形だったため）。
   ============================================================ */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px 0; /* 左右（列間）のマージンは無し。上下（行間）は維持（2026-08-16） */
  padding: 16px 0; /* 左右の余白も無くし、カードが画面の左右端に接するようにする */
  box-sizing: border-box;
  /* 右端だけ .grid 自身に線を持たせる。auto-fill でも列数は行によらず一定なので、
     どの行でも最後の列はここで揃う。カード側は border-left のみにして、
     右端の縦線と合わせて全体で1本の線に見えるようにしている（下記 .card 参照）。 */
  border-right: 1px solid var(--line);
  /* border-bottom は付けない。直後の footer（.foot）が border-top を持っているため、
     両方に付けると境目が二重線に見えて太く見えてしまう（2026-08-16 指摘） */
}

/* category 並び替え時にカテゴリーの変わり目へ挟む見出し（works.js が挿入）。
   grid-column: 1 / -1 で列いっぱいに広がり、auto-fill の自動配置によって
   前後のカードが自然に改行される（2026-08-16）。文字の見た目は archive の
   .archive-heading に合わせた（サイズ・字間・大文字）。 */
.category-label {
  grid-column: 1 / -1;
  padding: 8px 20px;
  font-family: var(--font-body);
  font-size: var(--size-nav);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--ink);
}

/* 並び替えバー（作品一覧。2026-08-15、ナビに寄せたデザインへ変更）。
   高さ・ホバー（背景を少し明るくするだけ、反転はしない）はナビの .nav .cell / a と
   同じ作り。全小文字にすることで、ナビ（大文字）より一段弱いヒエラルキーに
   見せている。アクティブ／ホバーは白100%、非アクティブは白50%（--ink-dim）で、
   ナビの現在地表示と同じ強弱の付け方に揃えている（2026-08-15）。

   ナビと同じくスクロールに追従させる（position: sticky。2026-08-15 追加）。
   sticky な要素は「直接の親の高さ」を超えて画面に留まれない仕様があり、
   最初 .row（高さ50px）の中に入れ子にしたところ、親と中身が同じ高さのため
   1pxも追従せず失敗した。.sortbar 自身を <main> の直接の子にする
   （<main> はページ全体の高さがあるので、その中でなら最後まで追従できる）。 */
.sortbar {
  position: sticky;
  /* var(--nav-height) だけだと、ナビ自身の下線（1px）ぶんが足りず、
     スクロールして両方が固定表示に切り替わった瞬間だけ、マークの下端と
     1pxずれてしまっていた（2026-08-16、指摘を受けて特定・修正。
     読み込み直後の通常フローでは nav の実際の高さ＝51pxの後ろに素直に
     並ぶので気づかず、sticky で固定される段になって初めて表面化していた）。 */
  top: calc(var(--nav-height) + 1px);
  z-index: 4; /* ナビ（z-index:5）より下、グリッドのカードより上 */
  height: var(--nav-height);
  /* margin-left ではなく padding-left でマークぶんを避ける（2026-08-16、再修正）。
     margin だと sortbar の箱自体がマークの右から始まり、下線もそこから始まる
     ＝マーク自身の下線と「隣り合う別の1px線」になり、境目の1pxのずれが
     見えてしまっていた。padding にして箱自体は画面幅いっぱいのまま保てば、
     下線は最初から1本の連続した線になり、ズレが起こりようがない
     （マークと重なる部分は同じ背景色なので、重なっていても見た目に影響しない）。 */
  padding-left: var(--mark-size);
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  background: var(--bg); /* スクロールで下を通り過ぎるカードが透けないように */
  border-bottom: 1px solid var(--line); /* sortbar 自体が sticky なので、この線もスクロールで流れず常に見える（2026-08-16 追加） */
}

.sort-btn {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 20px;
  font-family: var(--font-body);
  font-size: var(--size-nav);
  letter-spacing: var(--track-nav);
  text-transform: lowercase;
  color: var(--ink-dim);
  background: none;
  border: none;
  cursor: pointer;
}

.sort-btn:hover,
.sort-btn:focus-visible {
  background: var(--bg-hover);
  color: var(--ink);
}

.sort-btn.is-active {
  color: var(--ink);
}

/* new/old と jp/en の間の仕切り線（2026-09-07 追加）。--wide は
   new/old と jp/en の距離を離すため、線の左右に追加の余白を持たせる
   （指摘を受けて、既定の2倍ほどの間隔になるよう調整）。 */
.sortbar-sep {
  width: 1px;
  background: var(--line);
}

.sortbar-sep--wide {
  margin-left: 17px;
  margin-right: 0;
}

/* --- アーカイブのJP/EN切り替え --------------------------------- */
/* 2026-09-07：jp・enそれぞれを押す2ボタン式から、1個のボタンを押すと
   反転する形に変更。枠線は付けず、.sort-btn と同じく高さいっぱいの
   1セルとして扱い、マウスオンではセル全体に背景色を付ける。今どちらが
   選ばれているかは、[data-lang] の値に応じて片方を var(--ink)・
   もう片方を var(--ink-dim) にして示す（アクティブ側が濃い）。 */
.lang-toggle {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 6px;
  padding: 0 24px;
  font-family: var(--font-body);
  font-size: var(--size-nav);
  letter-spacing: var(--track-nav);
  color: var(--ink-dim);
  background: none;
  border: none;
  cursor: pointer;
}

.lang-toggle:hover,
.lang-toggle:focus-visible {
  background: var(--bg-hover);
}

.lang-toggle-sep {
  color: var(--ink-dim);
}

.lang-toggle-jp,
.lang-toggle-en {
  color: var(--ink-dim);
}

.lang-toggle[data-lang="ja"] .lang-toggle-jp,
.lang-toggle[data-lang="en"] .lang-toggle-en {
  color: var(--ink);
}

/* .lang-ja / .lang-en は常にDOMにあり、<body> の lang-mode-en クラスの
   有無だけで表示・非表示を切り替える（2026-09-07 追加）。
   注意：<body> 側のクラス名は .lang-en と同名にしないこと。単に
   .lang-en { display:none } と書くと、この規則が <body class="lang-en"> の
   body 自身にもマッチしてページ全体が消える不具合になる（実際に発生した）。 */
.lang-en {
  display: none;
}

body.lang-mode-en .lang-ja {
  display: none;
}

body.lang-mode-en .lang-en {
  display: inline;
}

.card {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  /* border-right は持たない。カード同士が横方向に隙間なく並ぶため、
     両方に border-right/left を付けると境目が2px（二重線）に見えてしまう
     （2026-08-16 指摘）。右端の線は .grid 自身の border-right でまとめて
     1本にしている。
     2026-08-16：上下の罫線は個々のカードには付けない、としていたが、
     左右マージンを無くしたことで JS 実測の .grid-hline は不要になり、
     各カード自身の枠線だけで同じ見た目を再現できるようになったため撤去した。 */
  text-decoration: none;
}

/* カードはリンクだが、全面が反転しては困るので通常のリンク色を打ち消す */
.card:hover,
.card:focus-visible {
  background: none;
  color: var(--ink);
}

.card:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: -3px;
}

.card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__veil {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: var(--veil-opacity);
  transition: opacity var(--veil-duration) ease;
}

.card:hover .card__veil,
.card:focus-visible .card__veil {
  opacity: 0;
}

.card__txt {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 12px 14px;
}

.card__txt > * { display: block; }

/* カード内の作品名（和文）。詳細ページの見出し（.disp.t-md、19px）と共有していたが、
   グリッドでは少し小さいほうがよい（2026-08-15 指摘）ので専用のサイズにする。 */
.card__ttl {
  font-size: 15px;
}

/* ============================================================
   展示一覧グリッド（exhibitions）
   works の .grid/.card（1:1トリミング）とは違い、サムネイルは元の縦横比の
   まま使う。行の中で上下（高さ）だけを揃え、幅は比率なりに変わる
   （2026-08-16、指摘を受けて works スタイルから変更）。
   CSS Grid の固定トラックでは幅が可変な配置を組めないため、flex-wrap に
   している。カード同士は隙間（gap）を空けて4辺とも罫線を付ける
   （works のような「隙間なし・片側だけ罫線」は、幅が行ごとに揃わない
   この形だと縁が欠けて見えてしまうため不採用）。
   ============================================================ */

.exh-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
}

.exh-card {
  position: relative;
  display: block;
  /* 行の高さ。幅は画像の縦横比なりに決まる。固定 320px だと画面幅を変えても
     大きさが変わらなかったため、画面幅に応じて連続的にスケールするように
     した（2026-08-16、指摘を受けて変更。全体的に一回り大きく）。
     下限380px・上限620pxは、狭い画面で小さくなりすぎず、広い画面で
     間延びしすぎない範囲として決めた。JS（exhibitions.js の layoutGrid）が
     行ごとに幅いっぱいへ敷き詰め直すので、これは JS 無効時の見た目。 */
  height: clamp(380px, 32vw, 620px);
  overflow: hidden;
  /* border-box が無いと、border の2px分だけ実際の見た目の幅が JS の計算より
     大きくなり、1行に収まるはずのカードが1つあふれて次の行に落ちてしまって
     いた（2026-08-16、layoutGrid の計算と実際の描画が合わなかった原因）。 */
  box-sizing: border-box;
  border: 1px solid var(--line);
  text-decoration: none;
}

.exh-card:hover,
.exh-card:focus-visible {
  background: none;
  color: var(--ink);
}

.exh-card:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: -3px;
}

/* .card__veil のホバー時フェードは .card:hover 前提で書かれていたため、
   .exh-card では効いていなかった（2026-08-16、指摘を受けて追加）。 */
.exh-card:hover .card__veil,
.exh-card:focus-visible .card__veil {
  opacity: 0;
}

.exh-card img {
  display: block;
  width: auto; /* base.css の img{width:100%} を上書き。高さを揃え、幅は比率なり */
  height: 100%;
  max-width: none;
}

/* category 並び替え時の見出し。flex-wrap 版（works の .category-label は
   CSS Grid 前提の grid-column: 1 / -1 を使っているため、ここでは
   「幅いっぱいに広がって強制的に改行させる」flexbox の定番手法を使う）。 */
.exh-label {
  flex: 1 0 100%;
  padding: 8px 20px;
  font-family: var(--font-body);
  font-size: var(--size-nav);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--ink);
}

/* ============================================================
   記録画像のギャラリー（作品詳細）
   地の色を変える。1行に2枚、高さを揃える（幅は縦横比なり）。
   2026-08-16、指摘を受けて変更（以前は3列・縦横比を揃えない仕様だった）。
   work.js が2枚1組で「幅の合計がちょうどコンテナ幅になる高さ」を計算して
   並べる（exhibitions.js の layoutGrid と同じ考え方）。JS 無効時は
   img が横幅いっぱい・高さ自動で並ぶだけの、単純な縦積みになる。
   ============================================================ */

.gal {
  display: flex;
  flex-wrap: wrap;
  background: var(--tint);
  /* border-bottom は持たない。中の figure が全員 border-bottom を持っており
     （行の区切り線として使う）、最後の行の figure がそのままギャラリー全体の
     下端の線を兼ねる。ここにも border-bottom を足すと、最後の行だけ線が
     2本重なって2px（二重線）に見えてしまう（指摘を受けて修正）。 */
}

.gal > figure {
  margin: 0;
  padding: var(--pad-gal);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-sizing: border-box;
}

/* gallery-pairs.js が figure を2枚1組（DOM順で偶数番目＝右列）に並べるため、
   右列の figure は常にギャラリーの右端＝ページ右端に接する。その figure が
   自分の border-right（列の区切り線）を持ったままだと、ページ右端の線
   （body の border-right）とほぼ重なって2px（二重線）に見えてしまう。
   左列（奇数番目）の border-right は列の区切りとして必要なので残し、
   右列だけ外す（2026-08-24、指摘を受けて修正。幅640px以下の1列表示のときは
   下の @media 側でどちらも外している）。 */
.gal > figure:nth-child(2n) {
  border-right: none;
}

/* 枚数が奇数のときの最後の1枚は、gallery-pairs.js が「2枚1組」を組めず
   単独扱いにするため、幅いっぱい（右列と同じ扱い）で並ぶ。奇数番目
   （＝右列ではなく左列の判定）のままだと上のルールで拾えず、この1枚だけ
   border-right が残ってページ右端と二重線になっていた。 */
.gal > figure:last-child:nth-child(odd) {
  border-right: none;
}

.gal > figure img {
  display: block;
}

@media (max-width: 640px) {
  /* 1列になった状態では、奇数番目の figure も含めて全員が右端に来るため、
     区切り線としての border-right は誰にも要らない（指摘を受けて追加）。 */
  .gal > figure { flex: 1 1 100% !important; border-right: none; }
  .gal > figure img { width: 100% !important; height: auto !important; }
}

/* 個展の記録ページ用（decisions.md 第5節「会場記録写真 2列」、2026-08-16）。
   作品詳細の .gal（3列想定）とは列数だけ変える。 */
.gal--2col > figure {
  flex: 1 1 45%;
}

/* ============================================================
   作品詳細の全幅ヒーロー
   ============================================================ */

.hero-still img {
  width: 100%;
  height: auto;
}

/* 作品詳細の記録映像（YouTube 埋め込み、展示歴の上。2026-08-24 追加）。
   16:9 で幅いっぱいに表示する。 */
.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* 会場の地図。基本白地の画像で、そのままだと明るすぎるため半透明にする
   （指摘を受けて追加。2026-08-18。50%は暗すぎるとのことで80%に変更）。 */
.exhibition-map-img {
  opacity: 0.8;
}

/* works・exhibitions の記録ページのヒーローだけ 3:2 に固定してトリミングする
   （object-fit: cover）。プロフィールのヒーロー（.profile-hero、縦横比そのまま
   のまま使いたい）とは別にするため、work.njk/exhibition.njk 側だけが持つ
   .hero-nav-wrap で絞り込む（2026-08-18、指摘を受けて追加）。 */
.hero-still.hero-nav-wrap img {
  display: block;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* プロフィールの静止画→GIF クロスフェード（2026-08-16）。
   GIF（#profile-anim）を静止画の上に絶対配置で重ね、読み込み完了後に
   profile.js が is-visible を付けて透明度を上げる。静止画（#profile-poster）は
   そのまま下に残るので、途中で読み込みが遅くても画面が崩れることはない。 */
.hero-still.profile-hero {
  position: relative;
}

.profile-hero #profile-anim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2s ease;
}

.profile-hero #profile-anim.is-visible {
  opacity: 1;
}

/* 名前（和文＋英文）を1段に。英文は .lbl の既定サイズ（10px）より+2px */
.profile-name {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.profile-name .disp {
  letter-spacing: 0.6em;
}

.profile-name .lbl {
  font-size: 12px;
  letter-spacing: 0.35em;
}

/* マス全体をリンクにする汎用クラス（2026-08-16、profile の archive への
   リンクが最初。2026-08-17、work/exhibition 詳細ページの一覧へ戻るリンクにも
   流用したので汎用の名前にした）。下線を消し、ホバーは base.css の
   a:hover（白地に反転）ではなく、nav/footer と同じ「マス全体の背景を
   少し明るくするだけ」に揃える。.cell の内側余白ぶんだけ負のマージンで
   広げてから同じ値のパディングで文字位置を戻す、nav/footer と同じやり方
   （値は --pad-cell の 9px 12px に合わせる）。 */
.cell-link {
  display: flex;
  margin: -9px -12px;
  padding: 9px 12px;
  text-decoration: none;
}

.cell-link:hover,
.cell-link:focus-visible {
  background: var(--bg-hover);
  color: var(--ink);
}

/* 展示詳細ページの出品作品（Works）・作品詳細ページの展示歴、それぞれの
   リンク一覧。複数のリンクが読点区切りで並ぶだけなので、.cell-link のような
   1本の帯全体を敷き詰める作りにはせず、下線だけを消す（指摘を受けて追加。
   ホバーは a:hover の白地反転のまま）。2026-08-18 追加。幅は残り幅いっぱい
   （.grow）のまま使う（指摘を受けて、80%への変更は撤回）。
   1件ぶん（作品タイトルや展示名）の途中で改行されると読みにくいので、
   1件の中では改行させない。件と件の間の区切り（", "）は通常の空白のままなので、
   折り返しが必要なときはそこ＝件の先頭で改行される（指摘を受けて追加）。
   まだ記録ページの無い展示はリンクにならず span で出す（work.njk の展示歴。
   2026-08-19 追加）。こちらも同じく改行禁止にする。 */
.related-works a,
.related-works span {
  text-decoration: none;
  white-space: nowrap;
  margin-right: 0.4em; /* テキスト中の ", " だけだと詰まって見えるため、少し余白を足す（指摘を受けて追加） */
}

/* 「Works」ラベルのマス。他のラベル（.col-lbl、110px）より狭くして、
   区切り線をもう少し左に寄せる（指摘を受けて追加。2026-08-18）。 */
.related-works-lbl {
  flex: 0 0 70px;
}

/* 「Works」ラベルを、行の高さいっぱいの中で上下中央に揃える（指摘を受けて
   追加。リンク一覧側（.related-works）は複数行に折り返わる普通の
   インライン要素の並びなので、flex化はせずそのままにする。中身が
   複数行になったときは、この行の高さ＝リンク一覧側の高さそのものに
   なるので、中央寄せの対象は「Works」ラベル側だけでよい）。 */
.related-works-lbl {
  display: flex;
  align-items: center;
}

/* コンタクトページ（2026-08-16）。見出しを置かないので、main（flex縦積み、
   base.css）いっぱいに広げる。アイコンは外部素材を使わない直書きSVG。
   currentColor で文字色（白）に追従する。

   2026-08-16：画面を1本の罫線で上下2つの .contact-half に分け、それぞれの
   半分の中でさらに中身を上下左右センターに置く形に変更。.contact-wrap 自体は
   main の残り高さいっぱい（flex:1）を占め、2つの .contact-half が
   flex:1 ずつで均等に分け合うので、罫線は常に .contact-wrap の高さのちょうど
   中央＝画面のほぼ中央にくる。 */
/* grid にしたのは、flex（flex:1 で上下2つに等分）だと、上下で中身の高さが
   違う（上は文章＋アイコン、下はアイコンのみ）せいで flex-basis の等分計算が
   狂い、罫線が画面中央からずれてしまっていたため（2026-08-16、指摘を受けて
   flex → grid に変更。min-height:0 では直らなかった。grid-template-rows の
   1fr は中身の高さに関係なく厳密に等分される）。 */
/* 2026-09-08：1fr auto 1fr（＝残りの領域を上下で等分）から変更した。
   等分しているのは「ナビとフッターに挟まれた残りの領域」なので、その
   領域自体が画面の中央からずれていると、罫線も画面の中央には来ない。
   スマホはナビが2段（102px）でフッターが47pxと差が大きく、罫線が
   画面中央より49px下＝SNS側に寄って見えていた（デスクトップはナビ51px・
   フッター47pxでほぼ対称なので目立たなかった。指摘の「特にスマホだと」
   と一致する）。上段の高さを「画面の半分マイナス、ナビの高さ」にして、
   罫線そのものを画面の上下中央に置く。
   minmax の下限を min-content にしてあるので、中身がこの高さより高く
   なる場合（極端に低い画面など）は、はみ出さずに押し広げる。 */
.contact-wrap {
  flex: 1;
  display: grid;
  grid-template-rows:
    minmax(min-content, calc(50svh - var(--nav-total-h)))
    auto
    minmax(min-content, 1fr);
}

.contact-half {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

/* スマホでは下半分の中身（説明文＋アイコン2段）が枠とちょうど同じ高さに
   なり、上下の余白が0pxで罫線とフッターに接していた（2026-09-08、
   「フッターまでの間隔も狭い」という指摘）。中身どうしの間隔を詰めつつ、
   枠の内側に余白を持たせて、罫線・フッターとの間を確保する。 */
@media (max-width: 700px) {
  .contact-half {
    gap: 24px;
    padding: 28px 0;
    box-sizing: border-box;
  }
}

.contact-divider {
  width: 100%;
  height: 1px;
  background: var(--line);
}

/* アイコンの上に置く一文（日本語＋英語、2026-08-16 追加）。profile.njk の
   本文と同じく、和文はそのまま、英文は .sub（base.css）で少し弱く見せる。 */
.contact-lede {
  max-width: 600px; /* 和文・英文とも折り返さず1行に収まる幅（2026-08-16） */
  text-align: center;
  font-size: calc(var(--size-body) + 2px); /* 和英とも+2px（2026-08-16） */
  color: var(--mute); /* 和英とも補助色に（2026-08-16） */
  /* スマホ幅では max-width より画面の方が狭く、文章が画面の左右端に
     ぴったり接して読みづらくなっていた（2026-09-08、指摘を受けて対応）。
     border-box にしてあるので、600px に収まる画面での見え方は変わらない。 */
  box-sizing: border-box;
  padding: 0 20px;
}

.contact-lede p {
  margin: 0;
}

.contact-lede p + p {
  margin-top: 6px;
}

/* 文節のかたまり（contact.njk 側で文を .u に分けてある）。inline-block は
   その内側で行が折り返らないので、狭い画面では必ず .u と .u の間、つまり
   文節の切れ目で改行される（2026-09-08、指摘を受けて追加）。
   1行に収まる幅では、ふつうの文と見た目は変わらない。 */
.contact-lede .u {
  display: inline-block;
}

/* 横並び一列（2026-08-16：縦一列 → 上段3・下段2の2段組 → 横並び一列、と変遷） */
.contact-row {
  display: flex;
  justify-content: center;
  gap: 80px;
  flex-wrap: wrap;
}

/* 並びは「横1列」と「上3・下2の2段」の2パターンだけにする
   （2026-09-08、指摘を受けて対応）。flex の自動折り返しに任せると、
   画面幅しだいで 4+1 や 2+2+1 といった中間の形が出てしまっていた。

   2段のときは、行の最大幅を「アイコン3個ぶん＋間隔2つぶん」に固定する。
   こうすると1行には物理的に3個しか入らないので、必ず 3+2 になる。
   justify-content: center はそのままなので、2段目の2個もこの幅の中で
   中央に並ぶ（ダミー要素で改行させる方法だと、その要素自身が1行を
   占めてしまい、段の間隔が2倍になるため採らなかった）。

   境界の800pxは、横1列に必要な幅（アイコン90px×5＋間隔80px×4＝770px）
   が収まらなくなる幅（約776px）に少し余裕を持たせたもの。 */
@media (max-width: 800px) {
  .contact-row {
    gap: 24px;
    max-width: calc(90px * 3 + 24px * 2); /* .contact-item の幅×3＋上の gap×2 */
  }
}

/* ラベルの文字数が項目ごとに違う（EMAIL / X (TWITTER) / ONLINE STORE など）ため、
   幅を中身にまかせると、アイコン同士の見た目の間隔がバラついて見えていた。
   幅を揃えることで、間隔が均等になる（2026-08-16、指摘を受けて対応）。 */
.contact-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  width: 90px;
}

/* Artsticker／Store／OpenSea は種類名の下にもう1行、取り扱う内容を添える
   （Art Pieces／Goods／NFTs、2026-08-16）。2行は詰めて、アイコンとの間だけ
   .contact-item の gap（10px）を保つ。 */
.contact-item__labels {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.contact-item__desc {
  color: var(--mute);
  opacity: 0.7;
}

/* クリックはアイコン側だけ（2026-08-16）。下のテキストはリンクではなく
   ただのラベルなので下線は付かない。ホバーは base.css の a:hover（背景反転）を
   使わない。当初アイコンの色を白→黒にしていたが、背景がほぼ黒（#23231F）の
   ため黒いアイコンは同化して見えなくなり、「変化しない」ことになってしまった。
   色ではなく透明度を下げる方式にし、背景の濃さに関係なく確実に見えるようにした。 */
.contact-icon-link {
  display: inline-flex;
  padding: 6px;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.contact-icon-link:hover,
.contact-icon-link:focus-visible {
  background: none;
  opacity: 0.4;
}

.contact-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  color: var(--ink);
}

/* STORES／OpenSea は画像（白黒シルエット化したロゴ、透明な余白は
   トリミング済み）。縦横比を保ったまま .contact-icon の32px枠いっぱいに
   収める（2026-08-16。以前は余白込みの枠に押し込めていて小さく見えていた）。 */
.contact-icon--logo {
  display: block;
  object-fit: contain;
}

/* ============================================================
   トップページ限定のカーソル（鳥のコマ送りアニメーション）
   2026-08-14 追加。実体は img（hero.js が src を差し替えて動かす）。
   マウスに追従させ、ネイティブのカーソルは非表示にする。
   コマ送りの間隔はスクロール速度に応じて hero.js が変える
   （速いほど短い間隔＝羽ばたきが速く見える）。
   ============================================================ */

body.has-cursor {
  cursor: none;
}

/* 下段のサムネイルは作品ページへの <a> なので、ブラウザ既定の
   cursor: pointer（指のアイコン）を持っている。要素自身の指定は body から
   継承した cursor: none より強いため、鳥の上に指が重なって見えていた
   （2026-09-08、指摘を受けて対応）。スライドの中だけ、リンクも含めて
   カーソルを消す。
   ナビとフッターのリンクは対象外のままにしてある。鳥はメニューの上では
   消える作りなので、そこは通常のカーソルが出るのが正しい。 */
body.has-cursor .stage,
body.has-cursor .stage * {
  cursor: none;
}

.mizutori-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 32px;   /* 元の GIF のネイティブ解像度と同じ（原寸）。拡大しない */
  height: 32px;
  image-rendering: pixelated; /* 用意した画像は原寸の整数倍なので、くっきり出る */
  /* transform は hero.js が毎フレーム書き換える（位置合わせ＋巻き戻り中の左右反転）。
     ここでの指定は JS が動く前の一瞬だけの保険。 */
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 999;
  opacity: 0; /* 最初の mousemove が来るまでは出さない（左上に張り付いて見えるのを防ぐ） */
}

/* タッチ操作にはカーソルという概念が無いので、OS標準の指定に戻す。
   2026-09-08：以前はここで .mizutori-cursor も display: none にしていたが、
   それだとスマホでは鳥が一度も出てこなかった（指摘を受けて変更）。
   表示したうえで、hero.js 側で「指でドラッグして動かせる1羽」として
   扱う。群れ（.mizutori-flock-bird）の方は引き続き出さない。 */
@media (hover: none) {
  body.has-cursor,
  body.has-cursor .stage,
  body.has-cursor .stage * {
    cursor: auto;
  }
}

/* 鳥の群れ（速く動かしたときに時々、画面を横切って飛んでいく演出）。
   要素自体は hero.js が動的に生成・削除する。カーソルと同じ画像を使い回す。
   2026-08-17 追加。 */
.mizutori-flock-bird {
  position: fixed;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  pointer-events: none;
  z-index: 998; /* カーソル（999）のすぐ下 */
}

@media (hover: none) {
  .mizutori-flock-bird {
    display: none;
  }
}

/* ============================================================
   年表（archive）。2026-08-16 全面的に組み直した。
   罫線が多すぎるとの指摘を受け、行の下線・セルの縦線は使わず、
   ホバーの背景ハイライトだけで行を読み分ける。1行に収まるよう、
   タイトル・会場は入りきらない分を「…」で省略する。
   種別（展示／受賞／掲載／上映／ワークショップ）で常時グループ分けし、
   それぞれに見出しを付ける。 */
.archive-heading {
  font-family: var(--font-body);
  font-size: var(--size-nav);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--ink);
  padding: 22px 20px 8px;
  border-top: 1px solid var(--line);
}

/* 最初の見出し（展示）は sortbar の下線とすぐ隣り合うので、ここでの上線は
   重ねて出さない（2026-08-16：固定・可動の線が並んで太く見えるとの指摘）。
   :first-of-type は「タグ名の中で最初」という意味で、直前に .sortbar という
   別要素があるここでは効かない（同じ div 同士でないと働かない落とし穴）ため、
   直前が .sortbar であることを明示する隣接セレクタで指定する。 */
.sortbar + .archive-heading {
  margin-top: 0;
  border-top: none;
}

.archive-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px; /* カテゴリー最後の行と、次の見出し（または末尾）との間の余白（2026-08-16） */
}

.archive-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 4px 20px;
  font-size: var(--size-body);
}

/* 年が変わる行の直前に少し余白を入れ、見出しは無くても年の切れ目が
   ふんわり分かるようにする（2026-08-16。archive.js が並び替えのたびに
   付け直す。年見出し行そのものは廃止済みなので、余白だけで表現する）。 */
.archive-row--year-gap {
  margin-top: 10px;
}

.archive-row:hover {
  background: var(--bg-hover);
}

/* 記録ページがある行は行全体がクリックできる（archive.js）。カーソルに
   加え、タイトルの下線でもリンクだと分かるようにする（2026-09-08）。 */
.archive-row[data-record-url] {
  cursor: pointer;
}

.archive-row[data-record-url] .archive-title {
  text-decoration: underline;
  /* a と同じ濃さに合わせる（base.css のリンク下線を参照） */
  text-decoration-color: rgba(240, 238, 232, 0.5);
  text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
  text-underline-offset: 2px;
}

/* 150px だと、一番長い日付（例：2026.07.28–2026.08.23、実測114px）でも
   後ろに余白が残り、日付→カテゴリの間隔がカテゴリ→タイトルより広く見えていた。
   archive-type と同じ考え方で詰めたが、118px は詰めすぎとのことで少し戻した
   （2026-08-16）。 */
.archive-date {
  flex: 0 0 136px;
  color: var(--mute);
  font-size: var(--size-label);
  letter-spacing: var(--track-label);
}

/* 固定幅（130px）だと、短い展示形式（個展・出店 など）の後ろに余白が残り、
   カテゴリ→タイトルの間隔だけ日付→カテゴリより広く見えていた。中身の幅に
   ぴったり合わせる（flex: 0 0 auto）と今度は行ごとに幅がバラバラになり、
   タイトルの開始位置が縦に揃わなくなってしまった。「セルは残しつつ詰める」
   との指定で、固定幅のセルはそのまま、幅の値だけ実際の中身（最長で
   「グループ展」の54px）に合わせて130px→70pxに詰めた（2026-08-16）。 */
.archive-type {
  flex: 0 0 70px;
  color: var(--mute);
  font-size: var(--size-label);
  letter-spacing: var(--track-label);
}

/* 会場・タイトルは、入りきらない分を省略する。flex の子は既定で
   「中身より縮まない」ため、min-width: 0 が無いと text-overflow が効かない
   （hero のタイトルで踏んだのと同じ落とし穴）。 */
.archive-title,
.archive-venue {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.archive-title {
  flex: 1 1 auto;
}

.archive-venue {
  flex: 0 0 240px;
  color: var(--mute);
  font-size: var(--size-label);
}

.archive-link {
  flex: 0 0 16px;
  text-align: right;
}

.archive-link a {
  text-decoration: none;
}

/* base.css の a:hover（背景を反転させる）は、この小さいアイコン相手だと
   四角く塗りつぶされて見えてしまうため打ち消す（指摘を受けて追加）。
   ホバー表現はアイコン自体の不透明度だけで見せる。 */
.archive-link a:hover,
.archive-link a:focus-visible {
  background: none;
  color: inherit;
}

/* 外部リンクのアイコン（従来の「→」の文字から差し替え。2026-09-02）。
   通常は半透明、ホバーで不透明に（指摘を受けて追加）。 */
.archive-link-icon {
  width: 10px;
  height: 10px;
  display: inline-block;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

.archive-link a:hover .archive-link-icon,
.archive-link a:focus-visible .archive-link-icon {
  opacity: 1;
}

@media (max-width: 780px) {
  .archive-type,
  .archive-venue {
    display: none;
  }
}