/* ============================================================
   story.css — Story Travel(物語)の見た目
   ・物語カード(横にスワイプ):入口ページ・物語の一覧・各物語ページの下
   ・物語の一覧ページ(/story/):夜空に物語が散らばる、いつも暗い画面
   ・各物語ページの先頭の写真
   「動きを減らす」設定の人には、動きを止める(いちばん下)
   ============================================================ */

/* ---- 物語カード ---- */
.st-rail{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 16px;
  padding:4px 16px 18px; margin:0 -16px; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.st-rail::-webkit-scrollbar{display:none}
.st-card{position:relative; flex:0 0 min(78vw,300px); aspect-ratio:4/5; border-radius:24px; overflow:hidden;
  scroll-snap-align:start; text-decoration:none; color:#fff; background:#2a201a; isolation:isolate;
  box-shadow:0 10px 30px rgba(18,13,10,.25); transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s}
.st-card img{position:absolute; inset:0; width:100%; height:100%!important; max-width:none; margin:0; border-radius:0; object-fit:cover; z-index:-2;
  transform:scale(1.06); transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.st-card::before{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(18,13,10,0) 30%,rgba(18,13,10,.55) 58%,rgba(18,13,10,.94))}
.st-card:hover{transform:translateY(-4px); box-shadow:0 18px 40px rgba(18,13,10,.35)}
.st-card:hover img{transform:scale(1.12)}
.st-card:active{transform:scale(.98)}
.st-body{position:absolute; left:0; right:0; bottom:0; padding:18px 18px 18px; display:flex; flex-direction:column; gap:6px}
.st-region{font-size:11px; font-weight:800; letter-spacing:.18em; color:#f0a074}
.st-place{font-size:28px; font-weight:800; line-height:1.1; letter-spacing:.01em}
.st-head{font-size:15px; font-weight:700; line-height:1.45}
.st-hook{font-size:13px; line-height:1.6; color:rgba(255,255,255,.78);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.st-chip{align-self:flex-start; margin-top:4px; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.st-card.is-more{display:flex; align-items:center; justify-content:center; background:linear-gradient(140deg,#3a2418,#120d0a);
  font-size:18px; font-weight:800; flex-basis:min(48vw,200px)}
.st-card.is-more::before{display:none}
@media (min-width:900px){
  .st-rail{margin:0; padding:4px 0 18px; scroll-padding:0}
  .st-card{flex-basis:260px}
}

/* ---- 物語の一覧(/story/) ---- */
body.story-index{
  --bg:#120d0a; --surface:#1d1612; --text:#f5efe9; --sub:#b9aca1; --hot:#f0a074;
  background:var(--bg); color:var(--text); color-scheme:dark;
}
.story-index main{overflow:hidden}
.si-hero{position:relative; padding:28px 0 8px}
.si-hero::before{content:""; position:absolute; inset:-30% -20% auto; height:120%; pointer-events:none;
  background:radial-gradient(40% 40% at 20% 20%,rgba(240,160,116,.18),transparent 70%),
             radial-gradient(35% 35% at 85% 30%,rgba(157,176,255,.14),transparent 70%)}
.si-kicker{margin:0; font-size:12px; font-weight:800; letter-spacing:.2em; color:var(--hot)}
.si-title{margin:.3em 0 .2em; font-size:clamp(30px,7.5vw,56px); line-height:1.2; font-weight:800; font-feature-settings:"palt"}
.si-sub{margin:0; font-size:13px; color:var(--sub)}
.si-layout{display:grid; grid-template-columns:minmax(0,1fr); gap:8px}
.si-layout > *{min-width:0}
@media (min-width:960px){
  .si-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:32px; align-items:start}
  .si-mapwrap{position:sticky; top:64px}
}

/* 星座の地図 */
.si-map{display:block; width:100%; height:auto; max-height:62vh; margin:6px auto 0; overflow:visible}
.si-grid{stroke:rgba(245,239,233,.06); stroke-width:1}
.si-line{fill:none; stroke:url(#siLine); stroke-width:1.4; stroke-dasharray:1400; stroke-dashoffset:1400;
  animation:si-draw 1.6s .2s cubic-bezier(.6,.1,.3,1) forwards}
@keyframes si-draw{to{stroke-dashoffset:0}}
.si-pt{cursor:pointer}
.si-pt .halo{fill:rgba(240,160,116,.18); transform-box:fill-box; transform-origin:center; animation:si-pulse 2.4s ease-out infinite}
.si-pt .core{fill:#fbe3d3; stroke:var(--hot); stroke-width:2; transform-box:fill-box; transform-origin:center; transition:transform .25s, fill .25s}
.si-pt text{fill:var(--text); font-size:12px; font-weight:700; paint-order:stroke; stroke:var(--bg); stroke-width:3px}
.si-pt .hit{fill:transparent}
.si-pt.on .core{fill:var(--hot); transform:scale(1.6)}
.si-pt.on text{fill:var(--hot)}
.si-pt:focus-visible{outline:none} .si-pt:focus-visible .core{stroke:#fff; stroke-width:3}
@keyframes si-pulse{0%{transform:scale(.6); opacity:.9} 100%{transform:scale(2.4); opacity:0}}

/* 地方のチップ */
.si-chips{position:sticky; top:48px; z-index:5; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none;
  padding:10px 16px; margin:4px -16px 0; background:rgba(18,13,10,.82); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px)}
.si-chips::-webkit-scrollbar{display:none}
.si-chips button{flex:none; min-height:44px; padding:0 16px; border-radius:999px; border:1px solid rgba(245,239,233,.18);
  background:transparent; color:var(--text); font:inherit; font-size:14px; font-weight:700; cursor:pointer}
.si-chips button[aria-pressed="true"]{background:var(--hot); border-color:var(--hot); color:#1b120c}
.story-index .st-card[hidden]{display:none}
.story-index .st-rail{margin-top:10px}
@media (min-width:960px){
  .story-index .st-rail{display:grid; grid-template-columns:1fr 1fr; overflow:visible}
  .story-index .st-card{flex-basis:auto}
  .si-chips{margin:4px 0 0; padding:10px 0}
}

/* 場所のかけら */
.si-h2{margin:36px 0 4px; font-size:clamp(20px,4.6vw,28px); font-weight:800}
.si-lead{margin:0 0 14px; font-size:13px; color:var(--sub)}
.si-bits{display:grid; grid-template-columns:1fr 1fr; gap:10px; list-style:none; margin:0; padding:0}
@media (min-width:720px){.si-bits{grid-template-columns:repeat(3,1fr)}}
.si-bits li[hidden]{display:none}
.si-bit{display:flex; flex-direction:column; height:100%; border-radius:16px; overflow:hidden; background:var(--surface);
  color:var(--text); text-decoration:none; border:1px solid rgba(245,239,233,.06); transition:transform .25s, border-color .25s}
.si-bit:hover{transform:translateY(-2px); border-color:rgba(240,160,116,.4)}
.si-bit img{width:100%; height:120px!important; max-height:none; object-fit:cover; display:block; margin:0; border-radius:0}
@media (min-width:720px){.si-bit img{height:150px!important}}
.si-bit span{padding:10px 12px 12px; display:flex; flex-direction:column; gap:4px}
.si-bit b{font-size:14px}
.si-bit small{font-size:12px; line-height:1.55; color:var(--sub)}
.si-bit i{font-style:normal; font-size:11px; font-weight:800; letter-spacing:.08em; color:var(--hot)}
.si-more{display:flex; justify-content:center; margin:16px 0 0}
.si-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 22px;
  border-radius:999px; font:inherit; font-weight:800; font-size:15px; text-decoration:none; cursor:pointer;
  background:transparent; color:var(--text); border:1px solid rgba(245,239,233,.24)}
.si-btn.fill{border:0; color:#fff}
.si-btn.plan{background:#2b44a8} .si-btn.route{background:#1c6b52}
.si-end{display:grid; gap:10px; margin:40px 0 48px; padding:22px; border-radius:24px; background:var(--surface)}
.si-end p{margin:0 0 4px; font-weight:800; font-size:18px}
@media (min-width:720px){.si-end{grid-template-columns:1fr auto auto; align-items:center}}
.story-index .site-foot{background:#0d0907; color:var(--sub); border-top:1px solid rgba(245,239,233,.06)}
.story-index .site-foot a{color:var(--text)}
.story-index .photo-credits{font-size:11px; color:var(--sub); line-height:1.7}

/* ---- 各物語ページの先頭(写真の上に題名) ---- */
.story-hero{position:relative; margin:0 -16px 18px; min-height:min(68vh,520px); display:flex; align-items:flex-end;
  color:#fff; isolation:isolate; overflow:hidden; border-radius:0 0 24px 24px}
.story-hero img{position:absolute; inset:0; width:100%; height:100%!important; max-width:none; margin:0; border-radius:0; object-fit:cover; z-index:-2}
.story-hero::before{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(18,13,10,.15),rgba(18,13,10,.35) 40%,rgba(18,13,10,.9))}
.story-hero .sh-in{padding:24px 20px}
.story-hero .sh-k{margin:0; font-size:12px; font-weight:800; letter-spacing:.18em; color:#f0a074}
.story-hero h1{margin:.3em 0 .2em; font-size:clamp(28px,7vw,44px); line-height:1.2; font-feature-settings:"palt"; color:#fff}
.story-hero .sh-credit{position:absolute; right:10px; top:8px; font-size:10px; color:rgba(255,255,255,.7)}
.story-hero .sh-credit a{color:inherit}
@media (min-width:760px){.story-hero{margin:0 0 22px; border-radius:24px}}
.story-others{margin:2.2em 0 0}
.story-others h2{margin:0 0 .6em}

@media (prefers-reduced-motion: reduce){
  .st-card, .st-card img{transition:none} .st-card:hover img{transform:scale(1.06)}
  .si-line{animation:none; stroke-dashoffset:0}
  .si-pt .halo{animation:none; opacity:0}
}