/* ヘッダー、各セクション、フッターの骨格を担当する。
   flexとgridは横並び、左右整列、カード配置にだけ使用する。 */
.site-header {
  position: absolute;
  z-index: 20;
  inset-block-start: 0;
  inset-inline: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px var(--gutter);
  color: var(--color-paper);
  border-block-end: 1px solid rgb(244 239 228 / .36);
}

/* ファーストビューとして画面を満たすため、表示領域の最小高を確保する。 */
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  color: var(--color-paper);
  background: var(--color-indigo);
  isolation: isolate;
}

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

.hero-scene {
  overflow: hidden;
}

.hero-layer {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-layer--middle {
  clip-path: polygon(0 26%, 100% 35%, 100% 100%, 0 100%);
}

.hero-layer--front {
  clip-path: polygon(0 0, 41% 0, 41% 100%, 0 100%);
}

.hero-scrim {
  background: rgb(20 43 70 / .42);
}

/* ヘッダーを除いた実表示領域の上下中央へ置く。上側だけヘッダーの高さを足し、
   svhで測ってモバイルのアドレスバー伸縮でも中央がずれないようにする。 */
.hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  align-items: end;
  min-block-size: 100svh;
  gap: clamp(40px, 8vw, 120px);
  padding:
    calc(var(--header-block) + clamp(24px, 5vh, 56px))
    var(--gutter)
    clamp(24px, 5vh, 56px);
}

.hero-copy {
  align-self: end;
  padding-block-end: 10px;
}

.section {
  position: relative;
  padding-block: var(--section-space);
}

/* 生成りの面はすべて同じ和紙の地で扱う。手前から順に、障子越しの光・その影・和紙の繊維。
   紙の色そのものは body の --page-surface が受け持ち、季節の切替もそのまま透ける。 */
.concept,
.hands,
.voices,
.compass {
  background-image:
    radial-gradient(ellipse 56% 46% at var(--washi-light), rgb(255 253 246 / .96), rgb(255 253 246 / 0) 72%),
    radial-gradient(ellipse 50% 36% at var(--washi-shade), rgb(30 58 95 / .055), rgb(30 58 95 / 0) 72%),
    var(--washi-grain);
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: auto, auto, 200px 200px;
}

/* 頁の入口の面は、地の表情をほかより一段濃くする。障子越しの光の桟を左上から流し、
   その内側でコンセプトと数を同じ紙の上に続けて見せる。動かさない静止の地。 */
.concept {
  --washi-light: 22% 26%;
  --washi-shade: 84% 74%;
}

.concept::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  pointer-events: none;
  background: repeating-linear-gradient(96deg,
    rgb(255 255 250 / .66) 0 20px,
    rgb(255 255 250 / 0) 20px 56px);
  -webkit-mask-image: radial-gradient(ellipse 58% 52% at 14% 8%, #000, rgb(0 0 0 / 0) 74%);
  mask-image: radial-gradient(ellipse 58% 52% at 14% 8%, #000, rgb(0 0 0 / 0) 74%);
}

.concept .inner {
  position: relative;
  z-index: 1;
}

/* 光と影のたまりは面ごとに左右を入れ替える。同じ絵の繰り返しと、面のつなぎ目の段差を避ける。 */
.hands {
  --washi-light: 30% 32%;
  --washi-shade: 84% 68%;
}

.voices {
  --washi-light: 74% 28%;
  --washi-shade: 26% 72%;
}

.compass {
  --washi-light: 26% 30%;
  --washi-shade: 80% 70%;
}

.section-layout {
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
  /* 縦書き見出しは本文より背が高い。天揃えのままだと本文の下だけが間延びするため中央で合わせる。 */
  align-items: center;
  gap: clamp(40px, 6vw, 88px);
}

.section-heading {
  display: flex;
  align-items: flex-start;
  gap: clamp(24px, 4vw, 48px);
}

.section-heading .section-lead {
  align-self: end;
}

/* 声の短冊と同じ組み。見出しを面いっぱいに置き、その下へ横並びで受ける。 */
.concept-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 42px);
  margin-block-start: clamp(34px, 4vw, 56px);
}

.experiences {
  overflow: hidden;
  color: var(--color-paper);
  background: var(--color-indigo);
}

.section-heading--experiences {
  margin-block-end: clamp(36px, 5vw, 72px);
}

.experience-stage {
  position: relative;
}

.experience-track {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}

html.slider-active .experience-stage {
  overflow: visible;
  cursor: grab;
  touch-action: pan-y;
}

html.slider-active .experience-stage:active {
  cursor: grabbing;
}

html.slider-active .experience-track {
  display: flex;
  gap: clamp(20px, 2.4vw, 32px);
  will-change: transform;
}

html.slider-active .experience-card {
  flex: 0 0 min(72vw, 460px);
  transform-style: preserve-3d;
}

.seasons {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  align-items: center;
  gap: clamp(42px, 7vw, 100px);
  padding-inline-end: var(--gutter);
  background-color: var(--season-surface);
  transition: background-color .75s var(--ease-asagi);
}

.season-scene {
  position: relative;
  overflow: hidden;
}

.season-image,
.season-light-image {
  inline-size: 100%;
}

.season-light-image {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 55% 0, 78% 100%, 0 100%);
  mix-blend-mode: screen;
  opacity: .28;
}

.season-wash,
.season-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.season-content {
  margin-inline: 0;
  padding-inline: 0;
}

/* 送り火と予約を1枚の縦長写真が貫く。上が夜空、下が行灯の路地で、
   途中に線も色の段差も置かない。写真の下端はフッターの紺へそのまま渡す。 */
.farewell {
  position: relative;
  overflow: hidden;
  color: var(--color-paper);
  background: #000416;
  isolation: isolate;
}

.farewell-scene {
  position: absolute;
  inset: 0;
}

.farewell-image {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* 路地を下端へ固定し、はみ出す夜空は上から切る。行灯の座標換算(data-lamp-focus="1")と同じ基準点。 */
  object-position: 50% 100%;
}

/* 夕闇の版はJSが動くときだけ被せる。JS無効では最初から灯の入った原版が見える。 */
.farewell-dusk {
  position: absolute;
  inset: 0;
  opacity: 0;
}

html.js .farewell-dusk {
  opacity: 1;
}

.farewell-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgb(4 12 28 / .34) 0,
    rgb(6 16 34 / .16) 24%,
    rgb(12 28 50 / .4) 56%,
    rgb(16 34 56 / .52) 86%,
    rgb(30 58 95 / .96) 100%);
}

.reservation {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  /* 路地の奥行きを見せるための1画面級シーン。文字量に依存しない絵のための下限。 */
  min-block-size: 88svh;
}

.reservation-inner {
  position: relative;
  z-index: 1;
  /* grid項目は margin-inline: auto があると伸びない。幅を渡してから中央へ寄せる。 */
  inline-size: 100%;
}

.ambient-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* 予約はヒーローと同じ組みにして、頁の始まりと終わりを対にする。 */
.reservation .section-heading {
  align-items: flex-end;
  gap: clamp(28px, 5vw, 72px);
}

.reserve-copy {
  align-self: end;
  padding-block-end: 8px;
}

/* 数の帯。コンセプトの続きとして同じ面に置き、上に細い罫を1本だけ引いて区切る。 */
.numbers {
  margin-block-start: clamp(52px, 6vw, 84px);
  padding-block-start: clamp(26px, 3vw, 40px);
  border-block-start: 1px solid var(--color-line);
}

.number-list {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 52px) clamp(24px, 3vw, 42px);
}

/* JSが動かない環境では横スクロール領域として全カードへ届くようにする(例外3)。
   スクラブ演出が起動したときだけ html.hands-scrub で transform 移動へ切り替える。 */
.hands-stage {
  overflow-x: auto;
  margin-block-start: clamp(36px, 5vw, 64px);
  padding-inline: var(--gutter);
}

html.hands-scrub .hands-stage {
  overflow: hidden;
}

.hands-track {
  display: flex;
  gap: clamp(18px, 2.4vw, 34px);
  inline-size: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nightfall {
  padding-block: 0;
  color: var(--color-paper);
  background: var(--color-indigo);
}

.nightfall-pin {
  position: relative;
  display: grid;
  align-content: end;
  /* pinして1画面ぶんの夜空を見せるシーン。ヒーローと同じ全画面基準(例外1相当の内在シーン制御)。 */
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.nightfall-scene {
  position: absolute;
  inset: 0;
}

.nightfall-image {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

.nightfall-dusk {
  position: absolute;
  inset: 0;
  background: linear-gradient(178deg,
    rgb(10 21 38 / .94),
    rgb(14 27 43 / .72) 46%,
    rgb(20 43 70 / .5));
}

.nightfall-content {
  position: relative;
  z-index: 2;
  inline-size: 100%;
  padding-block: clamp(120px, 16vh, 180px) clamp(48px, 7vh, 84px);
}

.nightfall-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 32px);
  margin: clamp(40px, 6vh, 72px) 0 0;
  padding: 0;
  list-style: none;
}

.voice-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5vw, 72px);
  margin-block-start: clamp(40px, 5vw, 64px);
}

/* 写真の空がいちばん澄んでいるのは上端側。コピーはそこへ置き、
   光の粒が下の路地から文字へ向かって立ちのぼる高さを確保する。 */
.okuribi {
  display: grid;
  justify-items: center;
  align-content: start;
  min-height: 92svh;
  padding-block: clamp(96px, 15vh, 168px) 0;
  color: var(--color-paper);
  text-align: center;
}

.okuribi-inner {
  position: relative;
  z-index: 1;
}

.site-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 34px var(--gutter);
  color: var(--color-paper-muted);
  background: var(--color-indigo);
}