:root {
  --bg: #fff;
  --fg: #1a1a1a;
  --muted: #8a8a85;
  --line: #e4e4e0;
  --ease: cubic-bezier(.77, 0, .175, 1);
  --font: "Inter", sans-serif; /* 使用フォントは Inter と Yarndings 12 のみ */
}

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

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: .04em;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; }

/* ---------- Header ---------- */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 50;
  color: var(--fg);
}

.site-title {
  display: inline-block;
  margin: 12px 0 0 12px;
  line-height: 1;
  font-family: "Inter", var(--font);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0;
  text-box: trim-both cap alphabetic;
}

.site-nav {
  position: absolute;
  left: 160px;
  top: calc(12px + 9px * .727 + 104px); /* 名前のベースラインから 104px（.727 = Inter のキャップハイト） */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* 縦の間隔：Works → Contact 26px / Works → Publication 132px / moor → biography 260px */
.nav-contact { margin-top: 26px; }
.nav-pub { margin-top: calc(132px - 26px - (7px + 6px + 9px * .727)); } /* 132 から Contact ブロックの高さ分を引く */
.nav-bio-wrap { margin-top: calc(260px - 1px); } /* moor → biography 260px（li の下 padding 1px 分を引く） */

.nav-works { display: flex; gap: 12px; align-items: flex-end; align-items: last baseline; }
.nav-sub { list-style: none; margin: 0; padding: 0; }
.nav-sub li { padding: 1px 0; }

/* Publication は moor の文末から始まる（階段状）。Publication → moor 8px */
.nav-pub { display: grid; grid-template-columns: auto auto; row-gap: calc(8px - 1px); /* li の上 padding 1px 分を引く */ }
.nav-pub > span { grid-column: 2; grid-row: 1; }
.nav-pub > .nav-sub { grid-column: 1; grid-row: 2; }
.nav-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.nav-info { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }

/* 親の font-size(13px) の行ボックスが残らないよう、各項目をブロックにして
   line-height: 1 + text-box-trim で文字そのものの高さ（キャップハイト〜ベースライン）にする */
.site-nav { line-height: 1; }

.site-nav a,
.site-nav button,
.site-nav .nav-works > span,
.site-nav .nav-contact > span,
.site-nav .nav-pub > span,
.site-nav .nav-info span {
  display: block;
  font-family: "Yarndings 12", var(--font);
  font-size: 7px;
  letter-spacing: 0;
}

.site-nav .nav-bio,
.site-nav .nav-sub a,
.site-nav .nav-info a,
.site-nav .nav-info span {
  font-family: "Inter", var(--font);
  font-size: 9px;
  text-box: trim-both cap alphabetic;
}

.site-nav button:focus:not(:focus-visible) { outline: none; }

/* ---------- Works hover: 全面画像 + 文字を白に ---------- */
.hover-bg {
  position: fixed;
  inset: 0;
  background: center / cover no-repeat;
  visibility: hidden;
  z-index: 30;
  pointer-events: none;
}

/* 写真の上に黒 15% を重ねて、白い文字を読みやすくする */
.hover-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .15);
}

body.is-hovering .hover-bg { visibility: visible; }
body.is-hovering .site-header { color: #fff; }

/* スマホ：作品名をタップしたとき（Works と選んだ作品名だけ残す） */
.nav-back,
.nav-go { display: none; }

body.is-previewing .nav-sub li:not(.is-selected),
body.is-previewing .nav-contact,
body.is-previewing .nav-pub > :not(.nav-back),
body.is-previewing .nav-bio-wrap { visibility: hidden; }

body.is-previewing .nav-pub { position: relative; }

/* (back)：Publication があった高さに、作品名と左揃えで表示（left は JS で指定） */
body.is-previewing .site-nav .nav-back {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  font-family: "Inter", var(--font);
  font-size: 9px;
  text-box: trim-both cap alphabetic;
  color: #fff;
}

/* →：選んだ作品名の下、一番長い作品名の右端に揃える（位置は JS で指定） */
body.is-previewing .nav-go {
  display: block;
  position: absolute;
  transform: translateX(-100%); /* left で指定した位置に右端を揃える */
  padding: 4px 0 4px 16px; /* タップしやすいよう当たり判定を広げる */
  margin-top: -4px;
  line-height: 0;
  color: #fff;
  z-index: 50;
}

.nav-go svg { display: block; overflow: visible; }

/* ---------- Biography (biography の右 70px, 幅 352px) ---------- */
.bio-overlay {
  position: fixed;
  inset: 0;
  visibility: hidden;
  z-index: 40;
}

.nav-bio-wrap { position: relative; }

.bio-panel {
  position: absolute;
  left: calc(100% + 70px);
  top: 0;
  width: 352px; /* 「Atmosphere … (Niigata)」が1行に収まる最小の 8 の倍数 */
  font-family: "Inter", var(--font);
  font-size: 9px;
  line-height: 1.25;
  letter-spacing: 0;
  text-box: trim-start cap; /* 1行目の上端を biography の文字の上端に揃える */
  padding-bottom: 120px; /* 文章の下に 120px の余白（スクロールしたときの下の空き） */
  display: none; /* 閉じている間はページの長さに含めない → 開いたときだけスクロールが発生 */
}

body.bio-open .bio-overlay { visibility: visible; }
body.bio-open .bio-panel { display: block; }

.bio-text p { margin: 0 0 8px; }
.bio-sep { margin: 0 0 8px; }

.bio-section { margin-bottom: 8px; }
.bio-section:last-child { margin-bottom: 0; }
.bio-section h3 { font-size: inherit; font-weight: 400; margin: 0; }

.bio-list { list-style: none; margin: 0; padding: 0; }
.bio-list li { display: grid; grid-template-columns: 32px 1fr; }

/* ---------- Inner pages ---------- */
.page {
  padding: 400px 40px 120px; /* 縦並びメニューの下から始める */
  max-width: 1440px;
  margin: 0 auto;
}


.page-title {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 64px;
}

/* Works */
.works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 80px 40px;
}

.work { cursor: pointer; }

.work-thumb {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--line);
}

.work-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease), opacity .6s;
}

.work:hover .work-thumb img { transform: scale(1.04); }

.work-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
}

.work-meta .year { color: var(--muted); }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 200;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility .5s;
}

.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox-head {
  display: flex;
  justify-content: space-between;
  padding: 28px 40px;
}

.lightbox-head .muted { color: var(--muted); margin-left: 16px; }

.lightbox-close { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }

.lightbox-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 80px;
  min-height: 0;
  position: relative;
}

.lightbox-stage img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
}

.lightbox-prev { left: 0; cursor: w-resize; }
.lightbox-next { right: 0; cursor: e-resize; }

.lightbox-foot {
  display: flex;
  justify-content: space-between;
  padding: 24px 40px 28px;
  color: var(--muted);
}

/* Publication */
.pub-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }

.pub-item {
  display: grid;
  grid-template-columns: 80px 1fr 1fr 220px;
  gap: 32px;
  align-items: start;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
}

.pub-year { color: var(--muted); }
.pub-title { font-size: 15px; margin: 0 0 4px; font-weight: 400; }
.pub-type { color: var(--muted); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.pub-detail { color: var(--muted); }
.pub-detail p { margin: 0; }

.pub-cover {
  aspect-ratio: 3 / 4;
  background: var(--line);
  overflow: hidden;
}

.pub-cover img { width: 100%; height: 100%; object-fit: cover; }

.notice {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "Inter", var(--font);
  font-size: 9px;
  line-height: 1.25;
  letter-spacing: 0;
}

.notice p { margin: 0; }
.notice a { display: inline-block; margin-top: 2px; } /* 2行の間を 2px 広げる */

/* Work detail：写真を幅 400px・上下 24px で縦に並べる */
.work-detail {
  /* フッターが写真の下に続くよう、通常の流れに置く */
  padding-top: calc(12px + 9px * .727 + 104px); /* メニューの上端に揃える */
  margin-left: 50%;
}

.work-detail-images { display: flex; flex-direction: column; gap: 24px; }
.work-detail-images img { width: 400px; height: auto; }
.work-detail-images.is-flush { gap: 0; } /* Ghost image：写真の上下余白なし */

/* キャプション：メニュー（Works）の下 248px、画面左から 236px に固定 */
.work-caption {
  position: fixed;
  /* メニューの上端 + Works の高さ（作品名 3 行 = キャップハイト + 上下 1px）+ 248px（li の下 1px 分を引く） */
  top: calc(12px + 9px * .727 + 104px + 3 * (9px * .727 + 2px) + 248px - 1px);
  left: 236px;
  width: 260px;
  font-family: "Inter", var(--font);
  font-size: 9px;
  line-height: 1.25;
  letter-spacing: 0;
  color: #585858;
  text-box: trim-both cap alphabetic;
  z-index: 50;
}

.work-caption p { margin: 0 0 1.2em; }
.work-caption p:last-child { margin-bottom: 0; }

/* 詳細ページ：名前・メニュー・キャプションは固定、写真だけスクロール */
.detail .site-header { position: fixed; }

/* 詳細ページのフッター：写真の下に続けて表示（上 400px・下 40px）、横並び（biography │ Contact＝キャプションと左揃え ─200px─ Publication） */
.detail-footer {
  margin: 400px 0 0 160px;
  padding-bottom: 40px;
}

.detail-footer .site-nav {
  position: static;
  flex-direction: row;
  align-items: flex-start;
}

.detail-footer .nav-bio-wrap,
.detail-footer .nav-contact,
.detail-footer .nav-pub { margin-top: 0; }
/* Contact をキャプションと同じ左 236px に揃える（biography の列を 236 - 160 = 76px 幅に固定） */
.detail-footer .nav-bio-wrap { width: calc(236px - 160px); }
.detail-footer .nav-pub { margin-left: 200px; }

/* (home)：スマホのみ表示 */
.detail-home { display: none; }

/* 詳細ページ：選択していない作品名はグレー */
.detail .site-header .nav-sub a:not([aria-current]) { color: #a3a3a3; }
body.is-hovering .site-header a { color: #fff; }

/* Footer */
.site-footer {
  padding: 40px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .1em;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .works-grid { grid-template-columns: repeat(2, 1fr); gap: 56px 24px; }
  .pub-item { grid-template-columns: 60px 1fr 140px; }
  .pub-detail { grid-column: 2; }
  .pub-cover { grid-row: 1 / span 2; grid-column: 3; }
}

@media (max-width: 600px) {
  /* ---- スマホ：メニューは左 8px、縦の間隔 Works ─28─ Contact ─72─ Publication ─144─ biography ---- */
  /* メニューを通常の流れに置き、下のコンテンツ（写真など）が重ならないようにする */
  .site-header { position: relative; z-index: 50; }
  .site-title { display: block; width: max-content; }
  .site-nav { position: static; margin: 30px 0 0 8px; } /* 名前の下から 30px */

  /* 作品名どうしの間は 4px */
  .nav-works .nav-sub li { padding: 0; }
  .nav-works .nav-sub li + li { margin-top: 4px; }
  .nav-contact { margin-top: calc(28px - 1px); } /* 「Works」の文字が最後の作品名より 1px 下に出る分を引く */
  .nav-pub { margin-top: 72px; }
  .nav-bio-wrap { margin-top: calc(144px - 1px); } /* moor の li の下 padding 1px 分を引く */

  .bio-panel { left: calc(100% + 10px); width: 240px; } /* スマホ：biography の右 10px、幅 240px */
}

/* ---- 詳細ページ：スマホ・タブレット縦（1039px 以下）はこのレイアウト ----
   PC レイアウトだと固定キャプション（左 236〜496px）と写真が重なるため */
@media (max-width: 1039px) {
  /* 名前と Works を上に固定（白背景・下 16px）。写真・キャプションはその下を流れる */
  .detail .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flow-root; /* 名前の上 12px の余白を白背景の内側に含める */
    background: var(--bg);
    padding-bottom: 16px;
  }
  .detail .site-title { display: block; width: max-content; }
  .detail .site-nav { position: static; margin: 30px 0 0 8px; } /* 名前の下から 30px */
  .detail .nav-works .nav-sub li { padding: 0; }
  .detail .nav-works .nav-sub li + li { margin-top: 4px; } /* 作品名どうしの間は 4px */

  /* 並び順：メニュー → 写真 → キャプション → (home)。フッターなし */
  body.detail { display: flex; flex-direction: column; }
  .detail .site-header { order: 0; }
  .detail .work-detail { order: 1; }
  .detail .work-caption { order: 2; }
  .detail .detail-home { order: 3; }
  .detail .detail-footer { display: none; }

  /* 写真：左右 16px・写真どうし 10px・メニュー（最後の作品名）の下 48px（白背景の下 16px 分を引く） */
  .work-detail { padding-top: 0; margin: calc(48px - 16px) 16px 0; }
  .work-detail-images { gap: 10px; }
  .work-detail-images img { width: 100%; }

  /* キャプション：写真の下 48px・幅 220px・写真の右端に揃える */
  .work-caption { position: static; align-self: flex-end; width: 220px; margin: 48px 16px 0 0; }

  /* (home)：キャプションの下 64px、その下に 64px の余白。キャプションの文章の左端に揃える */
  .detail-home {
    display: block;
    align-self: flex-end;
    width: 220px; /* キャプションと同じ幅・右端 → 左端が揃う */
    margin: 64px 16px 64px 0;
    font-family: "Inter", var(--font);
    font-size: 9px;
    line-height: 1;
    letter-spacing: 0;
    text-box: trim-both cap alphabetic;
  }
}

/* タブレット縦（601〜1039px）：写真は幅 400px のまま画面中央。キャプション・(home) は写真の右端に揃える */
@media (min-width: 601px) and (max-width: 1039px) {
  .work-detail { align-self: center; width: 400px; margin-left: 0; margin-right: 0; }
  .work-caption,
  .detail-home { align-self: center; width: 400px; margin-right: 0; padding-left: calc(400px - 220px); }
}

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