/* 這片森林（/forest/，2026-10-21 預覽）：只有這頁載入 */

/* 引言：左邊文字、右邊肖楠（引言寫到肖楠與地衣）；手機上下排 */
.fo-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); align-items: center; }
.fo-intro-text { justify-self: end; }
.fo-intro-media { margin: 0; }
.fo-intro-media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 860px) { .fo-intro { grid-template-columns: minmax(0, 1fr); } .fo-intro-text { justify-self: start; } }

/* 森林裡的鄰居：白天、雨後（紙色）→ 夜裡（深色，接螢火蟲季） */
.fo-group { margin-top: clamp(56px, 7vw, 112px); }
.fo-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px; padding-top: 22px; margin-bottom: clamp(28px, 3vw, 44px); border-top: 1px solid var(--line); }
.fo-group-head h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(20px, 1.8vw, 26px); letter-spacing: .32em; }
.fo-group-head p { margin: 0; font-size: 14px; letter-spacing: .12em; color: var(--mute); }
.fo-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 4vw, 56px) clamp(16px, 2vw, 32px); }
.fo-item figure { margin: 0; }
.fo-item img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.fo-item figcaption { display: flex; flex-direction: column; gap: 2px; padding-top: 16px; }
.fo-name { font-family: var(--display); font-size: 16px; letter-spacing: .24em; color: var(--ink); }
.fo-line { font-size: 13px; letter-spacing: .08em; line-height: 1.9; color: var(--mute); }

.fo-night { background: #10130F; color: var(--paper); padding: clamp(24px, 3vw, 48px) 0 0; }
.fo-night .fo-group-head { border-top-color: rgba(246, 243, 238, .16); }
.fo-night .fo-group-head p, .fo-night .fo-line { color: rgba(246, 243, 238, .6); }
.fo-night .fo-name { color: var(--paper); }
.fo-note { margin: clamp(40px, 4vw, 60px) 0 0; font-size: 12px; letter-spacing: .12em; color: rgba(246, 243, 238, .42); }

@media (max-width: 1100px) { .fo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  /* 手機：每組一排，左右滑 */
  .fo-grid { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; scroll-padding-left: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
  .fo-grid::-webkit-scrollbar { display: none; }
  .fo-item { flex: 0 0 78vw; scroll-snap-align: start; }
}

/* 螢火蟲季：夜色裡慢慢一明一滅的光點，接在「夜裡」後面（同一個底色） */
.fo-fireflies { position: relative; overflow: hidden; background: #10130F; color: var(--paper); padding: clamp(112px, 14vw, 200px) 0 clamp(120px, 15vw, 220px); text-align: center; }
.fo-ff-sky { position: absolute; inset: 0; pointer-events: none; }
.fo-ff-sky i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #E4F27A; box-shadow: 0 0 calc(var(--s) * 3) calc(var(--s) * .9) rgba(214, 236, 96, .55); opacity: 0; animation: fo-glow var(--t) ease-in-out var(--d) infinite; }
@keyframes fo-glow { 0%, 100% { opacity: 0; transform: translate(0, 0); } 45% { opacity: .9; } 60% { opacity: .75; transform: translate(6px, -10px); } }
@media (prefers-reduced-motion: reduce) { .fo-ff-sky i { animation: none; opacity: .5; } }
.fo-ff-copy { position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(22px, 2.6vw, 34px); }
.fo-fireflies h2 { padding-left: .34em; }
.fo-fireflies .verse { color: #E6E1D6; }
.fo-fireflies .note { color: rgba(246, 243, 238, .62); font-size: 13px; letter-spacing: .12em; margin: 0; max-width: 32em; text-wrap: balance; }
.fo-ff-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 44px; margin: clamp(8px, 1.4vw, 20px) 0 0; }
.fo-fireflies .cta { color: var(--paper); }

/* 森林裡的地方 */
.fo-places .chapter-head { margin-bottom: clamp(36px, 4.4vw, 64px); }