@charset "UTF-8";

/* =========================================================
   案A「余白の額装」
   写真の周りに白を残し、余白で静けさを作る
   ========================================================= */

:root {
  --bg: #ffffff;
  --bg-soft: #f6f6f5;
  --ink: #1c1c1c;
  --muted: #8f8f8c;
  --hair: #e6e6e3;

  --nav-size: 10.5px;
  --body-size: 14px;

  --gutter: 6vw;
  --frame: 8vw;        /* 写真の左右に残す白 */
  --rhythm: 14vh;      /* 縦の余白 */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 300;
  font-size: var(--body-size);
  line-height: 2.1;
  letter-spacing: 0.06em;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.4s var(--ease);
}

a:hover { opacity: 0.45; }

/* =========================================================
   案内（ヘッダー）
   スクロールを始めると静かに消え、上に戻すとまた現れる
   ========================================================= */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gutter);
  padding: 3.2vh var(--gutter);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0));
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.nav.is-hidden {
  opacity: 0;
  transform: translateY(-0.6rem);
  pointer-events: none;
}

.nav__name,
.nav__links a {
  font-size: var(--nav-size);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.nav__name { color: var(--ink); }

.nav__links {
  display: flex;
  gap: 2.4em;
}

.nav__links a[aria-current="page"] { color: var(--ink); }

/* =========================================================
   共通の入れ物
   ========================================================= */

.page {
  padding: 24vh var(--frame) var(--rhythm);
}

.page--narrow {
  max-width: 46rem;
  margin: 0 auto;
}

.section-label {
  font-size: var(--nav-size);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--rhythm);
}

/* =========================================================
   トップ（Home）
   画面中央に写真を1枚。周りに白を残す
   ========================================================= */

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18vh var(--frame) 12vh;
  gap: 6vh;
}

/* 横位置は幅で、縦位置は高さで大きさを決める。
   どちらを置いても画面からはみ出さないようにする */
.hero__frame {
  width: 100%;
  max-width: 52rem;
  display: flex;
  justify-content: center;
}

.hero__frame img {
  max-width: 100%;
  max-height: 62svh;
  width: auto;
  height: auto;
}

.hero__caption {
  text-align: center;
}

.hero__name {
  margin: 0;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.hero__tagline {
  margin: 1.4em 0 0;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.hero__more {
  margin-top: 4vh;
  font-size: var(--nav-size);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

/* =========================================================
   Works（シリーズの入口）
   ========================================================= */

.series-list {
  display: grid;
  gap: calc(var(--rhythm) * 1.2);
  max-width: 60rem;
  margin: 0 auto;
}

.series-card__frame {
  overflow: hidden;
}

.series-card__frame img {
  width: 100%;
  transition: opacity 0.8s var(--ease);
}

.series-card:hover .series-card__frame img { opacity: 0.72; }

.series-card__meta {
  display: flex;
  align-items: baseline;
  gap: 1.2em;
  margin-top: 2.4em;
}

.series-card__title {
  margin: 0;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.series-card__year,
.series-card__count {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--muted);
}

.series-card__count { margin-left: auto; }

/* =========================================================
   シリーズページ（2列グリッド）
   縦横比はそろえず、元のかたちのまま並べる
   ========================================================= */

.series-head {
  max-width: 60rem;
  margin: 0 auto calc(var(--rhythm) * 1.1);
}

.series-head__title {
  margin: 0;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.series-head__year {
  display: block;
  margin-top: 1.4em;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--muted);
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  gap: calc(var(--rhythm) * 0.9) var(--gutter);
  max-width: 68rem;
  margin: 0 auto;
}

.grid__item {
  cursor: zoom-in;
}

.grid__item img { width: 100%; }

/* =========================================================
   文章のページ（Profile / Gear / Contact）
   ========================================================= */

.prose p {
  margin: 0 0 2.4em;
}

.prose p:last-child { margin-bottom: 0; }

.prose--ja {
  margin-top: calc(var(--rhythm) * 0.8);
  padding-top: calc(var(--rhythm) * 0.6);
  border-top: 1px solid var(--hair);
  line-height: 2.4;
}

.gear-list {
  display: grid;
  gap: 5.5em;
  margin: 0;
}

.gear-list dt {
  font-size: 12.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.gear-list dd {
  margin: 1.2em 0 0;
  color: var(--muted);
}

.contact-list {
  display: grid;
  gap: 3.2em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-list__label {
  display: block;
  font-size: var(--nav-size);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.9em;
}

.contact-list__value {
  font-size: 14px;
  letter-spacing: 0.1em;
}

/* =========================================================
   ページの足元
   ========================================================= */

.foot {
  padding: var(--rhythm) var(--gutter) 6vh;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--muted);
  text-transform: uppercase;
}

/* =========================================================
   動き（スクロールで静かに浮かび上がる）
   ========================================================= */

.fade {
  opacity: 0;
  transform: translateY(1.6rem);
  transition: opacity 1.4s var(--ease), transform 1.4s var(--ease);
}

.fade.is-in {
  opacity: 1;
  transform: none;
}

/* =========================================================
   拡大表示
   背景は白のまま。写真だけが中央に大きく現れる
   ========================================================= */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7vh 7vw;
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
  cursor: zoom-out;
  transition: opacity 0.7s var(--ease), visibility 0.7s var(--ease);
}

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

.lightbox img {
  max-width: 100%;
  max-height: 86svh;
  width: auto;
  height: auto;
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.lightbox.is-open img {
  opacity: 1;
  transform: none;
}

/* 次の写真へ切り替える一瞬だけ、短く消える */
.lightbox.is-swapping img {
  opacity: 0;
  transform: none;
  transition-duration: 0.22s;
}

/* 選別のときだけ出る番号（住所の末尾に ?edit=1 を付けたとき） */
.lightbox__meta {
  position: absolute;
  bottom: 3.2vh;
  left: var(--gutter);
  font-size: var(--nav-size);
  letter-spacing: 0.18em;
  color: var(--muted);
  pointer-events: none;
}

.lightbox__close {
  position: absolute;
  top: 3.2vh;
  right: var(--gutter);
  font-size: var(--nav-size);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

/* =========================================================
   スマートフォン
   ========================================================= */

@media (max-width: 760px) {
  :root {
    --frame: 7vw;
    --gutter: 7vw;
    --rhythm: 9vh;
    --body-size: 13.5px;
  }

  .nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1em;
    padding: 2.4vh var(--gutter);
  }

  .nav__links {
    gap: 1.8em;
  }

  .page { padding: 18vh var(--frame) var(--rhythm); }

  .hero { padding: 16vh var(--frame) 10vh; }

  .hero__frame img { max-height: 56svh; }

  .grid {
    grid-template-columns: 1fr;
    gap: calc(var(--rhythm) * 1.1);
  }

  .lightbox { padding: 4vh 5vw; }
}

/* =========================================================
   動きを減らす設定にしている人向け
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .fade,
  .lightbox,
  .lightbox img,
  .nav {
    transition-duration: 0.01ms !important;
  }

  .fade {
    opacity: 1;
    transform: none;
  }
}