/* ============================================================
   grid.css — 1px の罫線で組む格子
   サイト全体がこの .row / .cell の組み合わせでできている。
   角丸なし・影なし（decisions.md 第5節）。
   ============================================================ */

.row {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
}

/* 続けて置いた row の罫線が二重にならないよう、最後の row は下線を持たない */
.row:last-child { border-bottom: none; }

.cell {
  padding: var(--pad-cell);
  border-right: 1px solid var(--line);
  box-sizing: border-box;
  min-width: 0;
}

.cell:last-child { border-right: none; }

/* 余白を埋めて右端まで伸ばすマス */
.grow { flex: 1; }

/* 画像を敷き詰めるマス（内側の余白を持たない） */
.cell--flush { padding: 0; }

/* 行いっぱいを占めるマス */
.cell--full { flex: 1 1 100%; border-right: none; }

/* 作品詳細・個展の記録ページ、前後の記録ページへの矢印。mark（左上の鳥）と
   同じように、hero 画像へ直接重ねる（2026-08-16、指摘を受けて変更。
   別の行として画像の上に置いていたのをやめた）。50×50pxのマス、
   4辺とも枠線。左右の端に、上下中央で固定する。 */
.hero-nav-wrap {
  position: relative;
}

.hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: var(--bg);
  border: 1px solid var(--line);
  text-decoration: none;
  z-index: 2;
}

.hero-nav--prev { left: 0; }
.hero-nav--next { right: 0; }

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

/* ＜＞の文字（フォント依存で形が崩れて見えた）ではなく、1pxの罫線で
   組んだ記号にする（2026-08-16、指摘を受けて変更）。正方形の右辺・下辺
   だけに線を引いて直角を作り、45度回して角を左または右に向ける、
   よくあるCSSだけの矢印の作り方。線の色は currentColor にして、
   .hero-nav 側の文字色（ホバーで変わる）にそのまま追従させる。 */
.chevron {
  display: block;
  width: 9px;
  height: 9px;
  border-style: solid;
  border-color: currentColor;
  border-width: 0 1px 1px 0;
}

.chevron--left {
  transform: rotate(135deg);
  margin-left: 3px; /* 回転で見た目の重心がずれる分だけ、光学的に中央へ寄せる */
}

.chevron--right {
  transform: rotate(-45deg);
  margin-right: 3px;
}

/* --- ヘッダー -------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

/* サイトマークの分だけ、メニュー本体を右にずらして場所を空ける */
.nav .row { border-bottom: none; padding-left: var(--mark-size); }

/* ナビ直下に置く行に使う。左上の鳥マークは position:absolute で下に
   var(--mark-size) ぶんはみ出す仕様（decisions.md 第5節）なので、そのままだと
   マークの下に文字が隠れてしまう。nav .row と同じ考え方で、その分だけ
   左に余白を作って避ける（作品一覧の並び替えバーなどで使う。2026-08-15 追加）。 */
.row--below-mark { padding-left: var(--mark-size); }

.nav .cell {
  height: var(--nav-height);
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  font-size: var(--size-nav);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
}

/* メニューの文字は下線なし。ホバーはアイコンと同じ「背景を少し明るくする」だけ
   （反転はしない）。現在地のリンク（[aria-current="page"]）は下の別ルールが
   詳細度で勝つので、ここでは無反応のまま変わらない。

   <a> はデフォルトだと文字だけを囲む小さな範囲にしかならず、.cell の余白部分に
   マウスを乗せても反応しなかった。align-self: stretch で .cell の高さいっぱいに、
   負のマージン＋パディングで左右も .cell の幅いっぱいに広げ、
   見た目のマス全体をホバー範囲にする（左右の値は .nav .cell の padding と一致させる）。

   2026-08-15：現在地がどれか一目で分かるよう、非アクティブは白70%、
   アクティブ（現在地）とホバー中は白100%にした（以前は逆に、現在地だけを
   --mute で落としていたが、分かりにくいとの指摘で強弱を反転）。 */
.nav .cell a {
  display: flex;
  align-items: center;
  align-self: stretch;
  margin: 0 -20px;
  padding: 0 20px;
  text-decoration: none;
  color: var(--ink-dim);
}

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

/* サイトマーク（鳥のアイコン）。
   .row の外に置いた正方形。左上に固定し、下側はヒーロー画像の上に重ねて見せる。
   .nav は sticky なので、絶対配置の基準になる（画面スクロールでも左上に残り続ける）。 */
.nav a.mark {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--mark-size);
  /* box-sizing: border-box にして「指定した height に border を含める」ことで、
     .sortbar（同じく border-box、2026-08-16 参照）と下端をぴったり揃えている。
     content-box のままだと border が height の外側に足されるため、
     nav（50pxの中身+1pxの下線）の下に来る .sortbar の下線と、mark 自身の
     下線が1pxずれて、works/archive で境目が二重線に見えていた（指摘を受けて対応）。 */
  box-sizing: border-box;
  height: calc(var(--mark-size) + 1px);
  background: var(--bg);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
/* 2026-08-16：border-right をトップページのヒーロー画像との衝突を理由に
   一度外したが、四角い枠として欠けて見えるとの指摘で戻した。
   トップページの、画像側の区切り線と偶然近づいて見える瞬間があるのは
   許容する（マークは固定・画像は常時スクロールという性質上、完全に
   揃え続けることはできないため）。 */

/* ホバー時は反転させず、背景を少し明るくするだけ（2026-08-14：反転はやめた）。
   文字色はここでは変えないので、アイコンの色も currentColor のまま揺れない。 */
.nav a.mark:hover,
.nav a.mark:focus-visible {
  background: var(--bg-hover);
  color: var(--ink);
}

/* 2026-08-14：mask-image（単色塗り）をやめて実画像に変更。
   新しい鳥の絵は黒い胴体＋白い縁取り・目という2色構成で、mask だと
   すべてが同じ色に塗りつぶされて模様が消え、ただのシルエットになってしまっていた。
   画像そのものの色を出す代わりに、ホバーでの色反転（currentColor 追従）は無くなる
   （正方形側の背景がホバーで明るくなるので、反応自体は分かる）。
   元絵はネイティブ32pxを綺麗な整数倍（256px）にしてあるので、
   この表示サイズなら Retina 3倍でもぼやけない。 */
.icon-mizutori {
  display: block;
  width: var(--mark-icon-size);
  height: var(--mark-icon-size);
  image-rendering: pixelated;
}

/* 現在いるページのリンクは下線を持たず、白100%で強く見せる（2026-08-15：
   以前は逆に --mute で落としていたが、現在地が分かりにくいとの指摘で反転） */
.nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration: none;
}

.nav a[aria-current="page"]:hover {
  background: none;
  color: var(--ink);
}

/* サイト名（右上のSHIGETA YUSUKE）だけ、.lbl 既定の字間より広げる
   （2026-08-16。.lbl 自体は他のラベル類でも使っているので、ここだけ上書き）。 */
.nav .site-title {
  letter-spacing: 0.2em;
}

/* 画面が狭くなり、メニュー項目とサイト名が1行に収まらなくなると2行に
   折り返ってしまう。折り返すくらいなら、サイト名の方を消してしまう
   （指摘を受けて追加。2026-08-19）。

   2026-09-08：境界を 795px → 860px に引き上げた。メニュー5項目を
   115px に統一したことで合計幅が 477px → 575px に増え、折り返しが
   始まる幅が 786px から 844px（＝mark 100px＋5項目575px＋伸縮マス1px
   ＋サイト名167px＋body右罫線1px）へ移動したため。795px のままだと
   796〜843px の間でサイト名がいったん2段目に落ちてから消える、という
   動きになっていた（指摘を受けて修正）。 */
@media (max-width: 860px) {
  .nav .site-title {
    display: none;
  }
}

/* メニュー5項目は、いちばん長い EXHIBITIONS の幅（文字74.9px＋左右20px
   ＝115px）に全て揃える（2026-09-08、指摘を受けて対応）。項目ごとに
   76〜110px とバラバラだったのを、同じ幅のボタンが並ぶ形にした。
   幅を固定したぶん文字は中央寄せにする（左寄せのままだと、WORKS のような
   短い項目でマスの右側だけが大きく空いて見えるため）。
   :not() で除いているのは、右端まで伸びる空マス（.grow）とサイト名で、
   これらは統一幅の対象ではない。 */
.nav .row > .cell:not(.grow):not(.site-title) {
  flex: 0 0 var(--nav-cell-w);
  justify-content: center;
}

/* マスを固定幅にしたぶん、中の <a> も伸ばさないとマスの左右が
   ホバー・クリックの効かない余白として残る（WORKS で実測33px）。
   .nav .cell a の「負のマージンでマス全体に広げる」仕組みは、マスが
   中身ぴったりの幅だった頃の作りなので、これを足して補う。 */
.nav .row > .cell:not(.grow):not(.site-title) > a {
  flex: 1;
  justify-content: center;
}

/* 右端まで伸びる空マスの左右余白を打ち消す（2026-09-08）。中身が無いので
   見た目には効いていないが、box-sizing: border-box では flex-basis: 0 が
   「左右の padding＋border」（20+20+1＝41px）を下回れない決まりのため、
   この空マスは常に41px幅として折り返しの計算に参加してしまう。項目を
   115px×5＝575px に固定した結果、幅700px前後でこの41pxが入りきらず、
   空マスだけが2段目に落ちて50pxの空白の帯になっていた。 */
.nav .row > .grow {
  padding: 0;
}

/* スマホでナビが3行に折り返す問題（2026-09-08、指摘を受けて対応）。
   375px幅では、メニュー5項目の幅の合計が mark のぶんを除いた 275px に
   収まらず3行になっていた。mark は縦2行ぶん（101px）しか無いため、
   3行目は左側 100px が空白の帯になり、さらに .grow の空マスが各行の
   末尾に余白を作って「崩れている」ように見えていた。

   flex の折り返しに任せると「何個目で折り返すか」を制御できないので、
   grid に切り替えて3列×2段に固定する。境界を 700px にしてあるのは、
   115px×5＝575px が1段に収まるのに必要な画面幅がおよそ676pxで、
   それを下回ると項目そのものが中途半端に折り返してしまうため
   （iPad縦の768pxは1段のまま）。5項目＋.grow でちょうど6マスに
   なり、最後の1マスが空マスとして埋まる（空きが出ないので、下の
   背景色による罫線が途切れない）。

   段と段の間の1pxの罫線は、row-gap 1px の隙間から .row の背景色
   （＝罫線色）を覗かせて描く。マス自身には背景色を敷いて、隙間以外を
   塞ぐ。border では「折り返した2段目のマスだけ上に線」という指定が
   CSSで書けないため、この方法を採っている。 */
@media (max-width: 700px) {
  .nav .row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 1px;
    background: var(--line);
    /* 各段の右端のマスは、その右罫線（373〜374px）が body の右罫線
       （374〜375px）と隣り合い、合わせて2pxの太い線に見えてしまう。
       行そのものを1px右へはみ出させ、マスの右罫線を body の右罫線と
       同じ位置に重ねる（色も太さも同じなので1本に見える）。 */
    margin-right: -1px;
  }

  .nav {
    overflow-x: hidden; /* 上の -1px のはみ出しを切り落とす */
  }

  /* 統一幅は画面幅に対する3等分にする。デスクトップと同じ 115px 固定だと
     1段に2個しか入らず3段になってしまうため。 */
  .nav .row > .cell:not(.grow):not(.site-title) {
    flex: initial;
  }

  .nav .cell {
    padding: 0 8px;
    background: var(--bg); /* row の背景（罫線色）を隙間以外で隠す */
  }

  /* マスが3等分で伸びても <a> 自身は文字幅のままなので、これが無いと
     マスの右側がタップできない余白として残る。負のマージンは上の
     padding と同じ値にすること（.nav .cell a のコメント参照）。 */
  .nav .cell a {
    flex: 1;
    justify-content: center;
    margin: 0 -8px;
    padding: 0 8px;
  }

  /* 空マス。ここを埋めないと、その部分だけ row の背景色（罫線色）が
     50px角の塊として見えてしまう。
     2026-09-08：位置を2段目の左端に固定した（指摘を受けて変更）。
     以前は最後の6マス目に流し込んでいたため、2段目が
     ［ARCHIVE］［CONTACT］［空］となって左寄せになっていた。
     空マスを先に置くことで ARCHIVE・CONTACT が右へ押し出され、
     CONTACT の右端が1段目の PROFILE の右端と揃う。 */
  .nav .row > .grow {
    display: block;
    grid-row: 2;
    grid-column: 1;
  }

  /* 上の row-gap 1px のぶん、ナビが1px高くなる。mark の下端と
     ナビの下端を揃えたままにするため、mark も1px伸ばす。 */
  .nav a.mark {
    height: calc(var(--mark-size) + 2px);
  }
}

/* iPhone SE などの 320px 幅では、3等分した1マスが 73px しかなく、
   EXHIBITIONS の文字（13pxで74.9px）が入りきらない。この幅のときだけ
   文字を1段階小さくして収める。 */
@media (max-width: 360px) {
  .nav .cell {
    font-size: 11px;
    padding: 0 4px;
  }

  .nav .cell a {
    margin: 0 -4px;
    padding: 0 4px;
  }
}

/* --- フッター -------------------------------------------- */
.foot {
  border-top: 1px solid var(--line);
  /* works の作品グリッドは各カード自身が border-bottom を持っており（.card）、
     最後の行のカードの下線とフッターの上線が隣り合って太く見えていた
     （2026-08-16 指摘）。1px 引き上げて重ねることで、隣り合う2本ではなく
     同じ1本として見えるようにする（archive など、直前に線を持たないページでは
     単にフッターが1px上に寄るだけで実害はない）。 */
  margin-top: -1px;
}

.foot .row { border-bottom: none; }

.foot .cell {
  padding: var(--pad-nav);
  font-size: var(--size-label);
  letter-spacing: var(--track-label);
  color: var(--mute);
}

/* フッターの「contact」リンクは、ナビのメニュー項目と同じく、文字の周りだけでなく
   マス（.cell）全体をホバー範囲・反転範囲にする（2026-08-16、指摘を受けて対応。
   .nav .cell a と同じ「負のマージンでいったんマス全体に広げ、同じ値のパディングで
   文字位置を元に戻す」やり方。値は --pad-nav（12px 20px）に合わせてある）。
   下線は付けない。ホバーの背景反転は base.css の a:hover をそのまま使う。 */
.foot .cell a {
  display: flex;
  align-items: center;
  align-self: stretch;
  margin: -12px -20px;
  padding: 12px 20px;
  text-decoration: none;
}

/* Back to Top はメニュー（ナビ）と同じ文字サイズにする（2026-08-16） */
.back-to-top {
  font-size: var(--size-nav);
}

/* フッター左端のPDFリンクのマス。幅をヘッダーの鳥ロゴ（--mark-size）に
   揃え、ページ上部の鳥ロゴの真下に来るようにする。文字はマスの中央に
   置く（2026-09-02、指摘を受けて追加）。 */
.foot-pdf-cell {
  flex: 0 0 var(--mark-size);
}

/* 2026-09-08にPDFの表記を外したため、現在このセルの中は空で、下の指定に
   合致する要素は無い。リンクを戻したときにそのまま効くよう残してある。 */
.foot-pdf-cell a {
  font-size: var(--size-nav); /* Back to Top と同じ文字サイズ（class="back-to-top"
                                  は使わない。理由は footer.njk のコメント参照） */
  justify-content: center;
}

/* 著作権表示の左右の縦罫線は不要（指摘を受けて追加。2026-09-02）。
   .cell 既定の border-right を、著作権表示のマスとその直前の
   grow マスの両方で打ち消す（.cell:last-child と同じ考え方）。 */
.foot-no-border {
  border-right: none;
}

/* ホバーは base.css の a:hover（白に反転）ではなく、ナビのメニューと同じ
   「背景を少し明るくするだけ」にする（2026-08-16、指摘を受けて統一） */
.foot .cell a:hover,
.foot .cell a:focus-visible {
  background: var(--bg-hover);
  color: var(--ink);
}

/* スマホのフッターは「左に©・右に Back to Top」の1行にする
   （2026-09-08、指摘を受けて対応）。デスクトップは変更なし。

   デスクトップは ［PDFのマス］［伸縮］［©］［伸縮］［Back to Top］の
   5マスで、2つの伸縮マスが©を中央に置いている。狭い画面ではこれが
   3段に折り返し、1段目は空マスだけ、という状態になっていた。
   PDFのマス（表記は既に外してあり中身が空）と、©の左側の伸縮マスを
   消すと、［©］［伸縮］［Back to Top］の3マスになり、©が左端・
   Back to Top が右端の1行になる。境界はナビと同じ 700px に揃えた。 */
@media (max-width: 700px) {
  .foot .foot-pdf-cell,
  .foot .row > .grow.foot-no-border {
    display: none;
  }

  /* ©(241.6px)＋Back to Top(70.1px)＋左右20pxずつの余白(80px)＝391.8px で
     375px 幅に収まらなかった。余白をナビと同じ12pxに詰めて359.7pxにする。 */
  .foot .cell {
    padding: 12px;
  }

  /* ©と Back to Top の間を埋める伸縮マスの余白も打ち消す。ナビの .grow と
     同じ理由で、box-sizing: border-box では flex-basis: 0 が「左右の
     padding＋border」を下回れず、この空マスが25px幅として折り返しの
     計算に加わり、Back to Top が2段目に落ちていた。 */
  .foot .row > .grow {
    padding: 0;
  }

  /* マス全体をホバー範囲にするための負のマージンは、上のマスの余白と
     同じ値でなければならない。20px のままだと Back to Top のリンクが
     マスから左右8pxずつはみ出し、ページに7pxの横スクロールが出ていた。 */
  .foot .cell a {
    margin: -12px;
    padding: 12px;
  }
}

/* 320px 幅では上の 359.7px でも収まらないので、この幅のときだけ
   「All Rights Reserved.」を省く（©と制作者名は残す）。 */
@media (max-width: 360px) {
  .foot-rights {
    display: none;
  }
}

/* --- 均等割りの情報バー ----------------------------------- */
/* 作品詳細の「映像 / 機材 / 設置寸法」など */
.row--meta > .cell {
  flex: 1 1 150px;
}

/* --- マスの幅 --------------------------------------------- */
/* 数字は「この幅までは詰めない」という目安。
   狭い画面では下の row--stack がこれを上書きして縦に積む。
   （HTML に style="flex:..." と直接書くと上書きが効かなくなる） */
.col-xs   { flex: 1 1 100px; }
.col-sm   { flex: 1 1 120px; }
.col-md   { flex: 1 1 160px; }
.col-lg   { flex: 1 1 260px; }
.col-half { flex: 1 1 45%; }
.col-lbl  { flex: 0 0 110px; }

/* 作品詳細ページの表題行だけ、幅をウィンドウ幅に対する割合で固定する
   （タイトル60%・年代20%・カテゴリー20%。2026-09-05、指摘を受けて追加）。
   col-lg/col-xs/col-md/col-sm は print.njk とも共有しているため、
   幅そのものは書き換えず、このセレクタで work.njk の表題行だけ上書きする。 */
.row--title-meta > .col-lg { flex: 0 0 60%; }
.row--title-meta > .col-xs,
.row--title-meta > .col-md,
.row--title-meta > .col-sm { flex: 0 0 20%; }

/* 個展詳細ページの表題行（タイトル60%・日付20%・カテゴリー20%。
   work.njk とは比率が異なるため別クラスにしている。2026-09-05）。 */
.row--title-meta-ex > .col-lg { flex: 0 0 60%; }
.row--title-meta-ex > .col-md,
.row--title-meta-ex > .col-sm { flex: 0 0 20%; }

/* 英題のみ（和題が無い）の表題セル。.row の他のセル（Year など）は
   ラベル＋値の2行あるぶん、行全体の高さがそのぶん高くなり、1行しかない
   このセルは既定だと上端に張り付いて見えていた。左寄せのまま、
   セルの中で上下中央に置く（2026-08-16、指摘を受けて追加）。 */
.title-cell--center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* --- 画面が狭いとき --------------------------------------- */
/* 横並びをやめて縦に積む。罫線の向きも入れ替える */
@media (max-width: 640px) {
  .row--stack > .cell {
    flex: 1 1 100%;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .row--stack > .cell:last-child { border-bottom: none; }
}