/* ヘッダーと各セクションの通常フロー・横並びを担当する。 */
/* foundation.cssの外枠を共有し、メディアクエリはmedia.cssへ集約する。 */

.site-header {
  color: var(--ink);
  inset: 0 0 auto;
  padding-block: 1.5rem;
  position: absolute;
  z-index: 20;
}

main,
.site-footer {
  position: relative;
  z-index: 1;
}

.header-inner {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.site-nav {
  align-items: center;
  display: flex;
  gap: clamp(0.8rem, 1.8vw, 1.75rem);
}

.hero {
  align-items: center;
  display: grid;
  isolation: isolate;
  /* v9指定のKV 100vhとイントロ終幕4辺0px収束を保つ必要例外。 */
  min-height: 100svh;
  overflow: hidden;
  padding-block: clamp(10rem, 22vh, 15rem) clamp(6rem, 12vh, 9rem);
  position: relative;
}

.hero-media,
.hero-scrim {
  inset: 0;
  position: absolute;
}

.hero-media {
  z-index: -3;
}

.hero-media img {
  /* KV写真を全面配置枠へ収める内在サイズ制御。 */
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.hero-content {
  position: relative;
  z-index: 3;
}

.concept {
  background: var(--theme-morning);
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(8rem, 16vw, 13rem);
  position: relative;
}

.concept-layout {
  align-items: center;
  display: grid;
  gap: clamp(3rem, 8vw, 7rem);
  grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr);
}

.concept-copy {
  position: relative;
  z-index: 2;
}

.section-heading {
  align-items: end;
  display: flex;
  justify-content: space-between;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.chapter-visual {
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(11rem, 28vh, 18rem);
  position: relative;
}

.chapter-media,
.chapter-scrim {
  inset: 0;
  position: absolute;
}

.chapter-media {
  z-index: -2;
}

.chapter-copy {
  position: relative;
  z-index: 2;
}

.chapter-gallery {
  padding-block: clamp(4.5rem, 9vw, 8rem);
}

.chapter-gallery--single {
  padding-inline: clamp(2rem, 18vw, 15rem);
  display: grid;
  grid-template-columns: min(46rem, 100%);
  justify-content: center;
}

.chapter-gallery--pair {
  display: grid;
  gap: clamp(1rem, 3vw, 2.5rem);
  grid-template-columns: repeat(2, 1fr);
}

.gallery-frame-motion {
  position: relative;
  z-index: 1;
}

.darkroom-stage {
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(7rem, 15vh, 11rem);
  position: relative;
}

.darkroom-scene,
.darkroom-scrim,
.darkroom-red-wash {
  inset: 0;
  position: absolute;
}

.darkroom-scene {
  z-index: -3;
}

.darkroom-heading,
.darkroom-workbench {
  position: relative;
  z-index: 2;
}

.darkroom-workbench {
  margin-top: clamp(3rem, 7vw, 6rem);
}

.darkroom-tray {
  padding-inline: clamp(1rem, 19vw, 14rem);
}

.profile-grid {
  align-items: center;
  display: grid;
  gap: clamp(2.5rem, 7vw, 6rem);
  grid-template-columns: 1.18fr 0.82fr;
}

.menu-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.75rem);
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.flow-grid {
  display: grid;
  gap: clamp(1rem, 2.4vw, 2rem);
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.shutter-studio-grid {
  align-items: center;
  display: grid;
  gap: clamp(3rem, 8vw, 7rem);
  /* ポラロイドの内在幅で列比率が変わらないよう、両列の自動最小幅を0にする。 */
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  position: relative;
  z-index: 2;
}

.footer-inner {
  text-align: center;
}

.contact-desk {
  padding-inline: clamp(2rem, 15vw, 10.5rem);
  position: relative;
}

.contact-letter-wrap {
  position: relative;
  z-index: 3;
}

.contact-inner {
  position: relative;
  text-align: center;
  z-index: 1;
}

.contact-dried-flower {
  bottom: -14%;
  left: -3%;
  position: absolute;
  z-index: 4;
}