/* 見た目は _brand/tokens.css（水野健太のデザインシステム）に従う。色は paper / ink 系のみ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h2, p, dl, dd, figure { margin: 0; }

/* ---------- ヘッダー ---------- */
.site-head { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; z-index: 10; padding-top: 24px; align-items: start; }
.site-head__logo { grid-column: 1 / 5; font: 700 17px/24px var(--mk-font-jp); letter-spacing: .04em; }
.site-head__logo small { margin-left: 12px; font: 400 12px/20px var(--mk-font-jp); letter-spacing: .04em; color: var(--mk-ink-2); }
.site-head__nav { grid-column: 9 / 13; display: flex; justify-content: flex-end; gap: 24px; font: 500 13px/20px var(--mk-font-jp); }
.site-head__nav a, .btn { position: relative; }
.site-head__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--mk-dur-base) var(--mk-ease); }
.site-head__nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- セクション（1画面に、見出し・スライダー・写真が収まる） ---------- */
.light { position: relative; isolation: isolate; overflow: hidden; padding-block: 96px 72px; }
.light__grid { position: relative; align-items: start; }

.sec-head { grid-column: 1 / 4; grid-row: 1 / span 7; position: sticky; top: 24px; align-self: start; }
.sec-head__en { font: 700 36px/40px var(--mk-font-en); letter-spacing: -.035em; }
.sec-head__jp { margin-top: 8px; font-size: 13px; line-height: 24px; color: var(--mk-ink-2); }

.time .mk-label, .fact .mk-label { font-size: 12px; text-transform: none; letter-spacing: .06em; }

/* display：大きな英単語が、時刻に応じてせり上がって入れ替わる */
.word { grid-column: 4 / 10; grid-row: 1; overflow: hidden; padding-block: .12em .24em; margin-bottom: -.18em; font-size: var(--mk-fs-display); } /* g や y の下端が切れないよう下に余白を持たせ、見た目の間隔は margin で戻す */
.word__line { display: block; font: 700 1em/.9 var(--mk-font-en); letter-spacing: -.055em; }

/* 左の3カラム：時刻スライダー → 本文 → 数字 → ボタン */
.lead { grid-column: 10 / 13; grid-row: 1; align-self: end; padding-bottom: 8px; }
.lead__title { margin: 0; font: 700 24px/36px var(--mk-font-jp); letter-spacing: .01em; }
.lead__text { margin: 8px 0 0; font-size: 13px; line-height: 24px; color: var(--mk-ink-2); }
.time { grid-column: 4 / 7; grid-row: 3; margin-top: 32px; }
.time__head { display: flex; justify-content: space-between; align-items: baseline; }
.time__clock { font: 600 36px/40px var(--mk-font-en); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.slider { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 24px; margin: 8px 0 0; background: transparent; cursor: pointer; }
.slider::-webkit-slider-runnable-track { height: 1px; background: var(--mk-ink); }
.slider::-moz-range-track { height: 1px; background: var(--mk-ink); }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -8px; border: 0; border-radius: var(--mk-radius-full); background: var(--mk-ink); transition: transform var(--mk-dur-base) var(--mk-ease); }
.slider::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: var(--mk-radius-full); background: var(--mk-ink); }
.slider:hover::-webkit-slider-thumb { transform: scale(1.25); }
.slider:focus-visible { outline: 1px solid var(--mk-ink); outline-offset: 4px; }
.time__ticks { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 4px; }
.time__ticks button { padding: 4px 0; font: 500 14px/20px var(--mk-font-jp); color: var(--mk-ink-2); transition: color var(--mk-dur-fast) var(--mk-ease); }
.time__ticks button:nth-child(1) { justify-self: start; }
.time__ticks button:nth-child(2) { justify-self: center; }
.time__ticks button:nth-child(3) { justify-self: end; }
.time__ticks button:hover, .time__ticks button.is-on { color: var(--mk-ink); }
.time__ticks button:focus-visible { outline: 1px solid var(--mk-ink); outline-offset: 2px; }

.time__hint { margin-top: 8px; font-size: 12px; line-height: 20px; color: var(--mk-ink-2); }
.desc { grid-column: 4 / 7; grid-row: 4; margin-top: var(--mk-gap-item); font-size: 14px; line-height: 28px; min-height: 112px; }

/* fact：ラベルと数字を左右に置く */
.facts { grid-column: 4 / 7; grid-row: 5; margin-top: var(--mk-gap-item); display: grid; row-gap: var(--mk-gap-item); }
.fact { display: flex; justify-content: space-between; align-items: baseline; }
.fact dd { margin: 0; white-space: nowrap; }
.fact .num { font: 600 36px/40px var(--mk-font-en); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.fact small { margin-left: 4px; font: 500 13px/20px var(--mk-font-jp); }

.btn { grid-column: 4 / 7; grid-row: 6; justify-self: start; white-space: nowrap; margin-top: var(--mk-gap-item); padding: 10px 20px; border: 1px solid var(--mk-ink); border-radius: var(--mk-radius-full); font: 500 13px/20px var(--mk-font-jp); transition: background var(--mk-dur-fast) var(--mk-ease), color var(--mk-dur-fast) var(--mk-ease); }
.btn:hover { background: var(--mk-ink); color: var(--mk-paper); }

/* L の写真：右の画面端まで。葉の影より前に出して、影をかけない */
.fig { position: relative; z-index: 4; grid-column: 7 / 13; grid-row: 3 / span 4; margin-top: 32px; }
.photo { height: clamp(300px, calc(100svh - 388px), 580px); }
.fig__cap { margin-top: 8px; font-size: 12px; line-height: 20px; color: var(--mk-ink-2); }
.room { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(.88) brightness(1.08); }
.room:nth-child(n+2) { opacity: 0; } /* 昼・夕はスライダーに合わせて重ねる */

/* 住宅を考えている人へ：光の見方（写真の下、まとまり間 64px あけて置く） */
.intent__title { grid-column: 4 / 8; grid-row: 7; margin-top: var(--mk-gap-group); font: 700 24px/36px var(--mk-font-jp); letter-spacing: .01em; }
.intent__body { grid-column: 8 / 13; grid-row: 7; margin-top: var(--mk-gap-group); font-size: 14px; line-height: 28px; }
.intent__body p { margin: 0 0 var(--mk-gap-item); }
.intent__body ul { margin: 0 0 var(--mk-gap-item); padding: 0; list-style: none; }
.intent__body li { display: flex; gap: 16px; padding: 4px 0; }
.intent__body b { flex: none; width: 3em; font-weight: 700; }

/* ---------- 木の葉の影（墨一色。色の変化は不透明度と形だけ） ---------- */
.shade { position: absolute; z-index: 3; inset: -8%; pointer-events: none; mix-blend-mode: multiply; color: var(--mk-ink); opacity: .3; }
.shade__move, .shade__tilt { position: absolute; inset: 0; }
.shade { --gust: 1; }
.shade__leaves { fill: currentColor; stroke: none; filter: blur(2.5px); }
.tile { position: relative; width: 100%; aspect-ratio: 1600 / 1000; }
.tile svg { position: absolute; display: block; overflow: visible; }
.tile__bg { inset: 0; width: 100%; height: 100%; }
/* 風で揺れる：小枝は付け根を支点に、風下へ傾いては戻る（左右対称ではなく風の向きに偏らせる）。transform だけを動かす */
.sprig { animation: sprig var(--t, 4s) ease-in-out infinite alternate; animation-delay: var(--dl, 0s); will-change: transform; }
@keyframes sprig { from { transform: rotate(calc(var(--a) * var(--gust) * -.35)); } to { transform: rotate(calc(var(--a) * var(--gust))); } }

.foot { padding-block: 24px 32px; }
.foot p { color: var(--mk-ink-2); }

/* ---------- Tablet / Phone：見出し → スライダー → 写真 の順で、スクロールせずに操作と結果が見えるようにする ---------- */
@media (max-width: 1024px) {
  .light { padding-block: 88px 64px; }
  .sec-head { grid-column: 1 / -1; grid-row: 1; position: static; margin-bottom: var(--mk-gap-item); }
  .word, .lead, .time, .fig, .desc, .facts { grid-column: 1 / -1; }
  .word { grid-row: 2; }
  .lead { grid-row: 3; align-self: start; max-width: 34em; margin-top: var(--mk-gap-item); padding-bottom: 0; }
  .time { grid-row: 4; max-width: 420px; }
  .fig { grid-row: 5; }
  .photo { height: auto; aspect-ratio: 4 / 3; }
  .desc { grid-row: 6; max-width: 34em; min-height: 84px; }
  .facts { grid-row: 7; grid-template-columns: repeat(3, 1fr); column-gap: var(--mk-gutter); }
  .fact { flex-direction: column; }
  .btn { grid-column: 1 / -1; grid-row: 8; }
  .intent__title { grid-column: 1 / -1; grid-row: 9; margin-top: var(--mk-gap-group); }
  .intent__body { grid-column: 1 / -1; grid-row: 10; margin-top: var(--mk-gap-item); max-width: 36em; }
}
@media (max-width: 640px) {
  .site-head__nav a:not(:last-child) { display: none; }
  .site-head__logo small { display: none; }
  .site-head__nav { grid-column: 3 / 5; }
  .light { padding-top: 80px; }
  .time__clock { font-size: 28px; line-height: 32px; }
  .fact .num { font-size: 28px; line-height: 32px; }
  .photo { aspect-ratio: 5 / 4; }
}
@media (prefers-reduced-motion: reduce) {
  .sprig { animation: none; will-change: auto; }
  .site-head__nav a::after, .slider::-webkit-slider-thumb { transition: none; }
}