/* ページの骨格を担当する。ヘッダー、章の余白、フルブリードの面の組み立て、フッター。
   base.cssの後、components.cssより前に読み込む。既定は縦積みで、横並びが要る場所だけgridを使う。 */

/* ------------------------------------------------------------------ ヘッダー */
.site-header {
  position: fixed;
  z-index: 20;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px var(--gutter);
  background: rgb(250 246 241 / .9);
}

.site-name {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: .34em;
  text-indent: .34em;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 13px;
  letter-spacing: .16em;
}

.site-nav a {
  color: var(--color-text-soft);
  transition: color var(--dur-ui) var(--ease-soft);
}

.site-nav .header-cta {
  padding: 11px 20px;
  color: var(--color-text-light);
  font-size: 12px;
  letter-spacing: .1em;
  transition: background-color var(--dur-ui) var(--ease-soft), color var(--dur-ui) var(--ease-soft), border-color var(--dur-ui) var(--ease-soft);
}

/* ------------------------------------------------------------------ 章の共通余白 */
.section {
  padding-block: var(--section-space);
}

.section-heading {
  display: grid;
  gap: 18px;
  margin-bottom: var(--block-space);
}

/* ------------------------------------------------------------------ 1. ヒーロー */
.hero {
  position: relative;
  display: grid;
  align-content: center;
  padding-block: 150px 116px;
  /* 背景写真の面。中身が高さを持たないので、ここだけ画面高を与える(例外4)。
     実測: svhを使わないとiOSのアドレスバー伸縮で下端が切れる。 */
  min-height: 100svh;
  overflow: hidden;
}

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

.hero-layer {
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: 62% 50%;
  /* パララックスで上下に動かすぶんの余白つきcover(例外1)。 */
  width: 100%;
  height: 112%;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgb(250 246 241 / .95) 0%, rgb(250 246 241 / .74) 38%, rgb(250 246 241 / .18) 72%),
    linear-gradient(to bottom, rgb(250 246 241 / .6) 0%, rgb(250 246 241 / 0) 34%);
}

/* 選ばれている色の空気。写真は生成りのまま、色だけを薄く重ねる。 */
.hero-wash {
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 52% at 74% 38%, rgb(var(--hue-rgb) / .3), rgb(var(--hue-rgb) / 0) 72%);
  transition: background var(--dur-hue) var(--ease-soft);
}

/* 揃えは .inner に任せる。外枠上限をここへ増やさない。 */
.hero-content {
  position: relative;
  display: grid;
  gap: 26px;
  justify-items: start;
}

.hero-copy {
  display: grid;
  gap: 32px;
  justify-items: start;
}

.hero-scroll {
  position: absolute;
  bottom: 34px;
  left: 50%;
  font-size: 11px;
  letter-spacing: .34em;
  color: var(--color-text-soft);
  transform: translateX(-50%);
}

/* ------------------------------------------------------------------ 2. かさなる(pin+scrub) */
.flow {
  position: relative;
  background: var(--color-paper-deep);
}

.flow-stage {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 28px;
  padding: 96px var(--gutter);
  /* pin区間の舞台。内在サイズを持たないため画面高を与える(例外4)。 */
  min-height: 100svh;
  overflow: hidden;
  text-align: center;
}

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

.flow-photo {
  position: absolute;
  inset: 0;
  object-fit: cover;
  /* 画像の内在サイズ制御(例外1)。 */
  width: 100%;
  height: 100%;
}

/* 顔料の写真を一段白へ起こしてから色を流す。写真の濃淡がそのまま色の濃淡になる。 */
.flow-base {
  position: absolute;
  inset: 0;
  background: rgb(250 246 241 / .55);
}

.flow-veil {
  position: absolute;
  inset: 0;
  background: rgb(var(--veil) / .62);
  opacity: 0;
}

/* 語が乗る中央だけを持ち上げる静的な白。色の濃い季節でも本文の読みやすさを落とさない
   (実測: 蘇芳の膜の上、顔料のいちばん濃いところで7.8:1)。 */
.flow-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(46% 42% at 50% 48%, rgb(250 246 241 / .55), rgb(250 246 241 / 0) 74%),
    linear-gradient(to bottom, rgb(250 246 241 / .34) 0%, rgb(250 246 241 / 0) 26%, rgb(250 246 241 / 0) 74%, rgb(250 246 241 / .4) 100%);
}

.flow-words {
  position: relative;
  display: grid;
}

.flow-note {
  position: relative;
  color: var(--color-text-soft);
  line-height: 2.1;
}

/* ------------------------------------------------------------------ 3. コンセプト */
.concept-item {
  display: grid;
  grid-template-columns: 2fr 3fr;
  align-items: center;
  transition: background-color var(--dur-hue) var(--ease-soft);
}

.concept-item + .concept-item {
  margin-top: 11px;
}

.concept-item:nth-child(1) {
  background: color-mix(in srgb, var(--color-paper) 98%, var(--hue) 2%);
}

.concept-item:nth-child(2) {
  background: color-mix(in srgb, var(--color-paper) 95%, var(--hue) 5%);
}

.concept-item:nth-child(3) {
  background: color-mix(in srgb, var(--color-paper) 92%, var(--hue) 8%);
}

/* ------------------------------------------------------------------ 4. 色を選ぶ */
.palette {
  position: relative;
  background: var(--color-paper-deep);
  overflow: hidden;
  transition: background-color var(--dur-hue) var(--ease-soft);
}

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

.palette-photo {
  position: absolute;
  inset: 0;
  object-fit: cover;
  /* 画像の内在サイズ制御(例外1)。 */
  width: 100%;
  height: 100%;
}

.palette-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgb(250 246 241 / .96) 0%, rgb(250 246 241 / .94) 52%, rgb(250 246 241 / .97) 100%),
    radial-gradient(60% 54% at 78% 26%, rgb(var(--hue-rgb) / .34), rgb(var(--hue-rgb) / 0) 74%);
  transition: background var(--dur-hue) var(--ease-soft);
}

.palette-canvas {
  position: absolute;
  inset: 0;
  /* canvasの内在サイズ制御(例外1)。 */
  width: 100%;
  height: 100%;
}

.palette .inner {
  position: relative;
}

.palette-body {
  display: grid;
  gap: clamp(28px, 4vw, 52px);
  grid-template-columns: 1.25fr 1fr;
  align-items: start;
}

.palette-picker {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}

/* ------------------------------------------------------------------ 5. 色の由来 */
.origin {
  position: relative;
  padding-bottom: var(--section-space);
}

.origin-photo {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
}

.origin-photo img {
  position: absolute;
  inset: 0;
  object-fit: cover;
  /* パララックスで動かすぶんの余白つきcover(例外1)。 */
  width: 100%;
  height: 116%;
}

.origin-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(var(--hue-rgb) / .1) 0%, rgb(var(--hue-rgb) / .26) 100%);
  transition: background var(--dur-hue) var(--ease-soft);
}

.origin-copy {
  padding-top: var(--block-space);
}

.origin-body {
  display: grid;
  gap: 26px;
}

.origin-meta {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, 1fr);
  padding-top: 26px;
  border-top: 1px solid var(--color-line);
}

/* ------------------------------------------------------------------ 6. ためす */
.swatch-body {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  grid-template-columns: 1.55fr 1fr;
  align-items: start;
}

.swatch-side {
  display: grid;
  gap: 16px;
  justify-items: start;
}

/* ------------------------------------------------------------------ 7. 光 */
.light {
  position: relative;
  padding-block: var(--section-space);
  overflow: hidden;
  color: var(--color-text);
}

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

.light-photo {
  position: absolute;
  inset: 0;
  object-fit: cover;
  /* 画像の内在サイズ制御(例外1)。 */
  width: 100%;
  height: 100%;
}

.light-veil {
  position: absolute;
  inset: 0;
  /* 上に載る白い膜を先に書く。本文が乗る左半分は0.92を下回らせず、
     文字の来ない右半分だけ膜を薄くして、光の違いが部屋に出るようにする。
     本文の右端は 981px 以上で 46% 空けてあるので、薄い側へは文字が届かない。 */
  background:
    linear-gradient(to right, rgb(250 246 241 / .95) 0%, rgb(250 246 241 / .92) 50%, rgb(250 246 241 / .34) 76%, rgb(250 246 241 / .14) 100%),
    radial-gradient(64% 72% at 78% 48%, rgb(var(--hue-rgb) / .46), rgb(var(--hue-rgb) / .08) 74%, rgb(var(--hue-rgb) / 0) 100%),
    linear-gradient(to bottom, rgb(var(--light-veil) / var(--light-veil-alpha)), rgb(var(--light-veil) / var(--light-veil-alpha)));
  transition: background var(--dur-hue) var(--ease-soft);
}

.light-copy {
  position: relative;
  display: grid;
  gap: 26px;
  justify-items: start;
}

/* ------------------------------------------------------------------ 8. 質感 */
.texture {
  padding-bottom: var(--section-space);
}

.texture-photo {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
}

.texture-photo img {
  position: absolute;
  inset: 0;
  object-fit: cover;
  /* パララックスで動かすぶんの余白つきcover(例外1)。 */
  width: 100%;
  height: 116%;
}

.texture-copy {
  display: grid;
  gap: 22px;
  padding-top: var(--block-space);
}

/* ------------------------------------------------------------------ 9. つくりかた */
.craft {
  background: var(--color-paper-deep);
  transition: background-color var(--dur-hue) var(--ease-soft);
}

.craft-body {
  display: grid;
  gap: clamp(28px, 4vw, 52px);
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

.craft-photo {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.craft-photo img {
  position: absolute;
  inset: 0;
  object-fit: cover;
  /* 画像の内在サイズ制御(例外1)。 */
  width: 100%;
  height: 100%;
}

.craft-copy {
  display: grid;
  gap: 26px;
}

.number-list {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(2, 1fr);
}

/* ------------------------------------------------------------------ 10. 品目一覧 */
.product-list {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(3, 1fr);
}

.product-list + .note {
  margin-top: 28px;
}

/* ------------------------------------------------------------------ 11. つくり手のノート */
.note-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* 写真を入れたので、カードを重ねると写真が切れる。横は重ねず、段だけを残す。
   高さは中身なりにして、下をそろえない。 */
.note-list {
  column-gap: clamp(16px, 2vw, 28px);
  align-items: start;
}

.note-card:nth-child(2) {
  z-index: 2;
  margin-top: clamp(44px, 5vw, 72px);
}

.note-card:nth-child(3) {
  z-index: 3;
  margin-top: clamp(88px, 10vw, 124px);
}

/* ------------------------------------------------------------------ 12. 質問 */
.faq-list {
  border-top: 1px solid var(--color-line);
}

/* ------------------------------------------------------------------ 13. お知らせ */
.signup {
  position: relative;
  padding-block: var(--section-space);
  background: #21191B;
  overflow: hidden;
  color: var(--color-text-light);
}

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

.signup-photo {
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: 50% 50%;
  /* 画像の内在サイズ制御(例外1)。 */
  width: 100%;
  height: 100%;
}

.signup-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(75deg, rgb(26 20 21 / .93) 0%, rgb(26 20 21 / .82) 54%, rgb(26 20 21 / .66) 100%),
    radial-gradient(58% 66% at 74% 42%, rgb(var(--hue-rgb) / .46), rgb(var(--hue-rgb) / .12) 74%, rgb(var(--hue-rgb) / 0) 100%);
  transition: background var(--dur-hue) var(--ease-soft);
}

/* 見出しと入力の背後に置く灯り。ゆっくり息をする。 */
.signup-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(34% 42% at 24% 48%,
    rgb(255 236 210 / .22) 0%,
    rgb(255 226 196 / .09) 48%,
    rgb(255 226 196 / 0) 78%);
  animation: signup-lamp 9s var(--ease-soft) infinite alternate;
  pointer-events: none;
}

@keyframes signup-lamp {
  from { opacity: .72; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 1; transform: translate3d(1.5%, -1.2%, 0) scale(1.06); }
}

.signup-inner {
  position: relative;
}
/* 玉ぼけの光。ひなたのKVと同じ考え方で、輪郭のない丸い光をいくつか浮かべる。
   面を回すと必ず端が出るので、回すのをやめて、玉ごとにゆっくり漂わせる。
   色は選んでいる色を混ぜ、上の節で色を変えるとここも変わる。 */
.signup-bokeh {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.signup-bokeh i {
  position: absolute;
  left: var(--bx);
  top: var(--by);
  width: var(--bs);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgb(255 248 234 / calc(.20 + var(--bt) * .06)) 0%,
    rgb(var(--hue-rgb) / calc(.16 - var(--bt) * .05)) 34%,
    rgb(var(--hue-rgb) / .05) 58%,
    rgb(var(--hue-rgb) / 0) 76%);
  opacity: .82;
  animation: signup-bokeh var(--bdur) var(--ease-soft) infinite alternate;
  animation-delay: var(--bd);
  transition: background var(--dur-hue) var(--ease-soft);
  will-change: transform;
}

/* 移動量は玉ごとに変える。玉の大きさに対する割合なので、
   大きい玉ほど実際の移動距離も大きくなり、速さがそろわない。 */
@keyframes signup-bokeh {
  from {
    transform: translate3d(0, 0, 0) scale(.88);
    opacity: .5;
  }

  to {
    transform: translate3d(var(--bmx), var(--bmy), 0) scale(1.16);
    opacity: .95;
  }
}

/* 6色の帯。いま選んでいる色だけが明るい。 */
.signup-bands {
  position: relative;
  display: flex;
  gap: 6px;
  margin-top: var(--block-space);
}

.signup-bands i {
  display: block;
  flex: 1 1 0;
  /* 帯の細さは意匠なので固定(例外2)。 */
  height: 2px;
  background: rgb(var(--band) / .34);
  transition: background-color var(--dur-hue) var(--ease-soft), box-shadow var(--dur-hue) var(--ease-soft);
}

html[data-hue="umegasane"] .signup-bands i:nth-child(1),
html[data-hue="tsutsuji"] .signup-bands i:nth-child(2),
html[data-hue="benihi"] .signup-bands i:nth-child(3),
html[data-hue="tsuyukusa"] .signup-bands i:nth-child(4),
html[data-hue="kuchiba"] .signup-bands i:nth-child(5),
html[data-hue="suo"] .signup-bands i:nth-child(6) {
  background: rgb(var(--band));
  box-shadow: 0 0 18px 1px rgb(var(--band) / .55);
}

.signup-form {
  display: grid;
  gap: 18px;
  justify-items: start;
  margin-top: var(--block-space);
}

/* ------------------------------------------------------------------ フッター */
.site-footer {
  padding-block: 64px 72px;
  border-top: 1px solid var(--color-line);
  background: var(--color-paper-deep);
  color: var(--color-text-soft);
  font-size: 13px;
  line-height: 2;
  transition: background-color var(--dur-hue) var(--ease-soft);
}

.site-footer .inner {
  display: grid;
  gap: 12px;
}

.footer-brand {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: .34em;
  color: var(--color-text);
}

.footer-copyright {
  padding-top: 8px;
  font-size: 12px;
  letter-spacing: .1em;
}