/* メディアクエリをここへ集約する。並びは pointer:fine → 広い幅 → 狭い幅 → 動き抑制 の順。
   同じ詳細度での上書きは読み込み順に依存するため、この並びを崩さない。最後に読み込む。 */

/* ------------------------------------------------------------------ ホバーを持つ端末 */
@media (pointer: fine) {
  .site-nav a:hover {
    color: var(--hue-ink);
  }

  .site-nav .header-cta:hover,
  .site-nav .header-cta:focus-visible {
    border-color: var(--color-text);
    background: var(--color-text);
    color: var(--color-text-light);
  }

  .chip:hover {
    color: var(--hue-ink);
  }

  .button:hover {
    background: var(--hue-ink);
    color: var(--color-text-light);
  }

  .button--solid:hover {
    background: var(--color-text);
    border-color: var(--color-text);
  }

  .signup .button--solid:hover {
    border-color: var(--color-text-light);
    background: var(--color-text-light);
    color: var(--hue-ink);
  }

  .light-button:hover {
    border-color: var(--hue-ink);
  }

  .product-card:hover,
  .product-card:focus-within {
    border-color: var(--hue-ink);
  }

  .product-card:hover .product-name,
  .product-card:focus-within .product-name {
    color: var(--hue-ink);
  }

  /* R21 カードを横切る光。hoverとfocus-visibleを同等に扱う。 */
  .product-card:hover::before,
  .product-card:focus-within::before {
    opacity: 1;
    transform: translateX(340%);
    transition: transform 1.05s var(--ease-standard), opacity .2s linear;
  }

  .swatch-surface {
    cursor: crosshair;
  }
}

/* ------------------------------------------------------------------ 広い幅 */
@media (min-width: 981px) {
  /* 光の章は右半分を部屋に明け渡す。本文をここで止めておく。 */
  .light-copy {
    padding-right: 46%;
  }
}

@media (min-width: 1281px) {
  /* .inner の左右余白ぶんを差し引いた値。写真の被写体へ文字を寄せないための右空け。 */
  .hero-content {
    padding-right: 39%;
  }

  .signup-form {
    padding-right: 36%;
  }

  .light-copy {
    padding-right: 44%;
  }
}

/* ------------------------------------------------------------------ 中くらいの幅 */
@media (max-width: 980px) {
  .concept-item {
    display: block;
  }

  .palette-body,
  .swatch-body,
  .craft-body {
    grid-template-columns: 1fr;
  }

  .product-list {
    gap: 24px;
    grid-template-columns: repeat(2, 1fr);
  }

  .note-list {
    display: block;
    padding-bottom: 0;
  }

  /* 写真が入ったので、左の字下げは幅の差になって写真が1枚ずつ小さくなる。
     縦積みでは3枚とも同じ幅にそろえる。 */
  .note-card:nth-child(2),
  .note-card:nth-child(3) {
    margin-top: 18px;
    margin-left: 0;
  }

  .origin-photo {
    aspect-ratio: 16 / 9;
  }

  .texture-photo {
    aspect-ratio: 16 / 9;
  }

  /* 1列になると本文が右まで届くので、光の違いは横ではなく下側で見せる。
     本文は上から77%までで終わり、膜が薄くなるのは80%から下だけ。 */
  .light {
    padding-bottom: calc(var(--section-space) + 112px);
  }

  .light-veil {
    background:
      linear-gradient(to bottom, rgb(250 246 241 / .95) 0%, rgb(250 246 241 / .93) 80%, rgb(250 246 241 / .3) 92%, rgb(250 246 241 / .14) 100%),
      radial-gradient(72% 58% at 50% 92%, 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)));
  }
}

/* ------------------------------------------------------------------ 狭い幅 */
@media (max-width: 780px) {
  .swatch .section-lead {
    text-wrap: balance;
  }

  .product-list {
    grid-template-columns: 1fr;
  }

  .origin-meta {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .origin-photo,
  .texture-photo {
    aspect-ratio: 3 / 2;
  }

  .marquee-group {
    gap: 34px;
    padding-right: 34px;
    font-size: 15px;
  }
}

@media (max-width: 680px) {
  .site-header {
    padding-block: 18px;
  }

  /* 狭い幅では目次だけを畳み、申し込みへの導線は残す。 */
  .site-nav-link {
    display: none;
  }

  .hero {
    padding-top: 118px;
  }

  .hero-scrim {
    background: linear-gradient(to bottom, rgb(250 246 241 / .88) 0%, rgb(250 246 241 / .7) 46%, rgb(250 246 241 / .86) 100%);
  }

  .number-list {
    grid-template-columns: 1fr;
  }

  .light-sample {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 14px;
  }

  .palette-panel {
    padding-left: 24px;
  }
}

/* ------------------------------------------------------------------ 640px以下 */
@media (max-width: 640px) {
  /* ルール22。狭幅では弱めた粒を残さず、写真とscrimだけの静止版にする。 */
  .palette-canvas {
    display: none;
  }
}

@media (max-width: 520px) {
  .palette-picker {
    grid-template-columns: 1fr;
  }

  .swatch-paper {
    aspect-ratio: 4 / 3;
  }

  .swatch-hint {
    font-size: 11px;
    letter-spacing: .1em;
  }

  .site-name {
    letter-spacing: .26em;
  }

  .site-header {
    gap: 14px;
  }

  .site-nav .header-cta {
    padding-inline: 14px;
    letter-spacing: .06em;
  }
}

/* ------------------------------------------------------------------ 動き抑制 */
@media (prefers-reduced-motion: reduce) {
  .signup-glow,
  .signup-bokeh i,
  .note-card::after,
  .signup .button--solid::after {
    animation: none;
  }


  .note-card:hover {
    transform: none;
  }

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .intro {
    display: none !important;
  }

  /* pin+scrubが動かないので、3つの語を重ねず縦に読ませる。 */
  .flow-word {
    grid-area: auto;
  }

  .flow-veil,
  .flow-name {
    display: none;
  }

  .palette-canvas,
  .swatch-canvas,
  .swatch-surface,
  .hue-sweep {
    display: none;
  }
}