:root {
  --bg: #08080a;
  --fg: #ece9e4;
  --dim: #7d7973;
  --faint: #4a4844;
  --line: #1c1c1f;
  --serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --display: "Cormorant Garamond", "Shippori Mincho", serif;
  --sans: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --pad: clamp(1.25rem, 5vw, 5rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  line-height: 2.05;
  letter-spacing: .04em;
  -webkit-font-smoothing: antialiased;
  animation: enter 1.4s var(--ease) both;
}
@keyframes enter { from { opacity: 0 } to { opacity: 1 } }

/* 粒子。画面全体にごく薄い粒を乗せる。単色の黒が「安いフラット」に見えるのを防ぐ */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 1px solid var(--dim); outline-offset: 4px; }

/* ---- header ---- */
header.site {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem var(--pad);
  mix-blend-mode: difference;
}
.brand {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: .42em;
  text-indent: .42em;
  line-height: 1;
}
.brand span {
  display: block;
  font-family: var(--sans);
  font-size: .58rem;
  font-weight: 300;
  letter-spacing: .3em;
  color: var(--dim);
  margin-top: .5rem;
  text-indent: .3em;
}
header.site nav { display: flex; gap: 2.5rem; }
header.site nav a {
  position: relative;
  font-size: .68rem;
  letter-spacing: .26em;
  color: var(--dim);
  transition: color .6s var(--ease);
}
header.site nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.5rem;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .7s var(--ease);
}
header.site nav a:hover { color: var(--fg); }
header.site nav a:hover::after, header.site nav a.on::after { transform: scaleX(1); transform-origin: left; }
header.site nav a.on { color: var(--fg); }

/* ---- shot（静止画 + 再生。押すまで YouTube を読み込まない） ---- */
.shot {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #101013;
}
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.82) brightness(.78) contrast(1.04);
  transform: scale(1.01);
  transition: filter 1.4s var(--ease), transform 2s var(--ease);
}
.shot:hover img { filter: saturate(1) brightness(1) contrast(1); transform: scale(1.045); }

.shot .play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 74px;
  height: 74px;
  border: 1px solid rgba(236, 233, 228, .35);
  border-radius: 50%;
  transition: border-color 1s var(--ease), transform 1s var(--ease), background 1s var(--ease);
}
.shot .play::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-left: 9px solid rgba(236, 233, 228, .8);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  transform: translateX(2px);
  transition: border-left-color 1s var(--ease);
}
.shot:hover .play {
  border-color: rgba(236, 233, 228, .95);
  background: rgba(8, 8, 10, .25);
  transform: scale(1.06);
}
.shot:hover .play::after { border-left-color: #fff; }

/* ---- hero（画面いっぱい） ---- */
/* リールが無いときの、トップの見出しだけの区画。
   （固定ヘッダーの下に潜らないよう、上の余白は .prose と同じだけ取る） */
.intro {
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(9rem, 20vh, 14rem) var(--pad) clamp(2.5rem, 6vh, 4rem);
}
.intro h1 {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.9vw, 1.5rem);
  font-weight: 400;
  letter-spacing: .22em;
  line-height: 1.9;
}

.hero { position: relative; }
.hero-shot {
  aspect-ratio: auto;
  height: 92vh;
  min-height: 480px;
}
.hero-shot img { filter: saturate(.8) brightness(.6) contrast(1.05); }
.hero-shot:hover img { filter: saturate(.95) brightness(.72) contrast(1.02); }
.hero-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 8, 10, .55) 0%, transparent 32%, transparent 55%, rgba(8, 8, 10, .9) 100%);
  pointer-events: none;
}
.hero .play { z-index: 2; }

.hero-copy {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: clamp(2.5rem, 6vh, 5rem);
  z-index: 2;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
}
.hero-copy h1 {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.9vw, 1.5rem);
  font-weight: 400;
  letter-spacing: .22em;
  line-height: 1.9;
}
.hero-copy .now {
  font-size: .68rem;
  letter-spacing: .2em;
  color: var(--dim);
  text-align: right;
  line-height: 2.2;
}
/* 大きい映像の下のタイトルも、同じく横1列にする（作品一覧と揃える） */
.hero-copy .now em { font-style: normal; color: var(--faint); margin-left: 1rem; }

/* ---- lede ---- */
main { padding: 0; }
.lede {
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(6rem, 14vh, 11rem) var(--pad);
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: 3rem;
  align-items: start;
}
.lede .label {
  font-size: .64rem;
  letter-spacing: .32em;
  color: var(--faint);
  padding-top: .7rem;
}
.lede p {
  font-family: var(--serif);
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  line-height: 2.5;
  letter-spacing: .09em;
  max-width: 34em;
  color: var(--fg);
}
.lede p + p { margin-top: 1.8rem; font-family: var(--sans); font-size: .85rem; line-height: 2.2; color: var(--dim); }

/* ---- works ---- */
/* ★ 上に何も無いとき（リールも見出しも無いとき）、固定ヘッダーの下に潜らせない */
main > .works:first-child { padding-top: clamp(9rem, 20vh, 14rem); }
.works {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--pad) clamp(6rem, 12vh, 10rem);
}
.works-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(3rem, 7vh, 5.5rem);
}
.works h2 {
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .42em;
  color: var(--dim);
}
/* 種別で絞るボタン。
   ★ 小さすぎると「押せるもの」に見えない。文字を大きくし、枠を付けて、
     選ばれているものは反転させる（色の濃淡だけで区別しない）。 */
.filter { display: flex; gap: .6rem; flex-wrap: wrap; }
.filter button {
  font-size: .84rem;
  letter-spacing: .14em;
  color: var(--dim);
  padding: .5rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  white-space: nowrap;
  transition: color .4s var(--ease), border-color .4s var(--ease), background-color .4s var(--ease);
}
.filter button:hover { color: var(--fg); border-color: var(--dim); }
.filter button.on {
  color: var(--bg);
  background: var(--fg);
  border-color: var(--fg);
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(2.5rem, 5vh, 4rem) clamp(1.25rem, 2vw, 2rem);
}
.work[hidden] { display: none; }
/* ★ 偶数番を下げる「ずらし」はやめた。2列のときの仕掛けで、4列だとただ散らかって見える。 */

/* 画面の幅に応じて、4 → 3 → 2 → 1 と減らす */
@media (max-width: 1280px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 960px)  { .grid { grid-template-columns: repeat(2, 1fr); } }

/* 番号・タイトル・クレジットを、横1列に並べる。
   ★ 折り返しは殺さない。長いタイトルのとき、はみ出すか潰れるかになる。 */
.work figcaption {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 .7rem;
  padding-top: 1rem;
}
.work .no {
  flex: none;
  font-family: var(--display);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--faint);
}
.work figcaption strong {
  font-family: var(--serif);
  font-weight: 400;
  font-size: .88rem;
  line-height: 1.8;
  letter-spacing: .04em;
}
.work figcaption span {
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--dim);
}

/* ---- cta ---- */
.cta {
  border-top: 1px solid var(--line);
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(5rem, 12vh, 9rem) var(--pad);
  text-align: center;
}
.cta p {
  font-family: var(--serif);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  letter-spacing: .12em;
  color: var(--dim);
  margin-bottom: 2.75rem;
}
.btn {
  display: inline-block;
  position: relative;
  font-family: var(--display);
  font-size: .8rem;
  letter-spacing: .34em;
  text-indent: .34em;
  padding: 1.15rem 3.5rem;
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color .8s var(--ease), color .8s var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fg);
  transform: translateY(101%);
  transition: transform .8s var(--ease);
  z-index: -1;
}
.btn { z-index: 0; }
.btn:hover { color: var(--bg); border-color: var(--fg); }
.btn:hover::before { transform: translateY(0); }

/* ---- footer ---- */
footer.site {
  border-top: 1px solid var(--line);
  max-width: 1440px;
  margin: 0 auto;
  padding: 3rem var(--pad) 4rem;
  display: flex;
  gap: 2.5rem;
  align-items: center;
  font-size: .68rem;
  letter-spacing: .22em;
  color: var(--faint);
}
footer.site a { transition: color .6s var(--ease); }
footer.site a:hover { color: var(--fg); }
footer.site .copy { margin-left: auto; font-family: var(--display); letter-spacing: .2em; }

/* ---- modal ---- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(4, 4, 5, .96);
  display: grid;
  place-items: center;
  padding: var(--pad);
  animation: fade .6s var(--ease);
}
.modal[hidden] { display: none; }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
.modal .frame {
  width: min(1400px, 100%);
  aspect-ratio: 16 / 9;
  background: #000;
  animation: rise .8s var(--ease);
}
@keyframes rise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
.modal .frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.modal .close { position: absolute; top: 1.75rem; right: 1.75rem; width: 40px; height: 40px; }
.modal .close::before, .modal .close::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 20px;
  height: 1px;
  background: var(--dim);
  transition: background .5s var(--ease), width .5s var(--ease);
}
.modal .close::before { transform: rotate(45deg); }
.modal .close::after { transform: rotate(-45deg); }
.modal .close:hover::before, .modal .close:hover::after { background: var(--fg); width: 24px; }

/* ---- prose（About / ご依頼） ---- */
.prose {
  max-width: 42em;
  margin: 0 auto;
  padding: clamp(9rem, 20vh, 14rem) var(--pad) clamp(5rem, 10vh, 8rem);
}
.prose h1 {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: .38em;
  text-indent: .38em;
  margin-bottom: clamp(3rem, 7vh, 5rem);
  color: var(--dim);
}
.prose h2 {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 400;
  letter-spacing: .14em;
  margin: 4rem 0 1.4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.prose h3 {
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .22em;
  color: var(--faint);
  margin: 2.25rem 0 .8rem;
}
.prose p { margin-bottom: 1.4rem; color: var(--fg); }
.prose > p:first-of-type {
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 2.4;
  letter-spacing: .08em;
}
.prose ul, .prose ol { margin: 0 0 1.4rem 0; list-style: none; }
.prose li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .5rem;
  color: var(--fg);
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1em;
  width: 6px;
  height: 1px;
  background: var(--faint);
}
.prose ol { counter-reset: n; }
.prose ol li { counter-increment: n; }
.prose ol li::before {
  content: counter(n, decimal-leading-zero);
  position: absolute;
  left: 0;
  font-family: var(--display);
  font-size: .78rem;
  color: var(--faint);
}
.prose a { border-bottom: 1px solid var(--faint); transition: border-color .5s var(--ease); }
.prose a:hover { border-color: var(--fg); }
.prose .credit {
  font-family: var(--serif);
  letter-spacing: .08em;
  padding: 1.4rem 1.75rem;
  border-left: 1px solid var(--line);
  color: var(--dim);
}
.prose .fine { font-size: .74rem; color: var(--faint); letter-spacing: .1em; }

/* ---- 押すとコピーできるメールアドレス ---- */
/* ★ .copy は footer の著作権表示で使っている。こちらは .copybtn */
.copybtn {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--faint);
  padding: 0;
  cursor: pointer;
  transition: border-color .5s var(--ease), color .5s var(--ease);
}
.copybtn:hover { border-color: var(--fg); color: var(--fg); }
.copybtn:focus-visible { outline: 1px solid var(--fg); outline-offset: 4px; }
.copybtn.ok { border-color: var(--fg); }
.copybtn .state {
  margin-left: .9rem;
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--faint);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.copybtn.ok .state, .copybtn.ng .state { opacity: 1; }
.copybtn.ng .state { color: #d98a80; }

/* ---- 出現 ---- */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity 1.5s var(--ease), transform 1.5s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .shot:hover img { transform: scale(1.01); }
}

@media (max-width: 860px) {
  body { font-size: 13.5px; }
  header.site { padding: 1.5rem var(--pad); }
  header.site nav { gap: 1.5rem; }
  .brand { font-size: .95rem; letter-spacing: .3em; }
  .hero-shot { height: 72vh; min-height: 380px; }
  .hero-copy { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .hero-copy .now { text-align: left; }
  .lede { grid-template-columns: 1fr; gap: 1.25rem; }
  .grid { grid-template-columns: 1fr; gap: 3rem; }
  .works-head { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  footer.site { flex-wrap: wrap; gap: 1rem; }
  footer.site .copy { margin-left: 0; width: 100%; }
}