body {
  background: #e3eaec;
  color: var(--ink);
}

.sheet {
  position: relative;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  background: var(--mist);
  overflow: clip;
}

@media (min-width: 480px) {
  body {
    padding: 28px 0;
  }
  .sheet {
    box-shadow: 0 24px 60px -34px rgba(30, 37, 64, 0.5);
  }
}

section {
  position: relative;
  z-index: 2;
  padding-inline: var(--gutter);
}

/* 幅も高さも 0 だが、inline のままだと行ボックスが立って表紙の上に 27px の帯が出る。 */
.stamp-defs {
  display: block;
}

/* ---------- 表紙: 写真の柱 ---------- */

/*
 * 斜めの 3 本の柱に写真と動画が縦に流れ、中央の霞の上に題文が載る。
 * 柱は 190svh のあいだ画面に留まり、スクロールに合わせて拡がって薄くなる。
 */
.cover {
  position: relative;
  height: 190svh;
  z-index: 2;
}

.cover__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
}

.cover__cols {
  position: absolute;
  /* 回転で上辺が片側に下がるぶん、画面より一回り大きく取って四隅まで写真で埋める。 */
  inset: -12% -9%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  transform: rotate(-5deg);
}

.cover__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: hero-drift var(--t) linear infinite;
  will-change: transform;
}

/* 真ん中の柱だけ逆向きに流して、3 本が同じ帯に見えないようにする。 */
.cover__col:nth-child(2) {
  animation-direction: reverse;
}

/* height: auto が無いと、ビルドが出す height 属性がそのまま効いて aspect-ratio が無視される。
   flex: none が無いと、柱の高さに合わせて縮む。 */
.cover__col img,
.cover__col video {
  width: 100%;
  height: auto;
  flex: none;
  aspect-ratio: 9 / 13;
  object-fit: cover;
  border-radius: 3px;
  filter: saturate(0.85) contrast(0.95);
}

/* 同じ列を 2 回並べてあるので、半分送ると継ぎ目なくつながる。 */
@keyframes hero-drift {
  to {
    transform: translateY(-50%);
  }
}

.cover__wash {
  position: absolute;
  inset: 0;
  /* 題文が写真の濃いところに重なっても読めるよう、中心はほぼ mist で覆う。 */
  background: radial-gradient(
    ellipse 72% 58% at 50% 52%,
    rgba(238, 243, 244, 0.97) 0,
    rgba(238, 243, 244, 0.91) 45%,
    rgba(238, 243, 244, 0.42) 78%,
    rgba(238, 243, 244, 0.2) 100%
  );
}

.cover__title {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 0 var(--gutter);
}

.cover__num {
  margin: 0;
  font-size: min(150px, 36vw);
  line-height: 0.82;
  color: var(--ink);
  white-space: nowrap;
}

/* 巨大な「9.28」の直下。横に詰めて2つ並べず、1/3 の大きさで下に添える。 */
.cover__num-end {
  margin: 6px 0 0;
  font-size: min(46px, 11vw);
  line-height: 1;
  color: var(--ink-soft);
}

.cover__span {
  margin: var(--sp-4) 0 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.3em;
  color: var(--ink-soft);
}

.cover__headline {
  margin: 44px 0 0;
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  font-weight: 500;
}

.cover__sub {
  margin: 10px 0 0;
  font-family: var(--mincho);
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

/* 線の起点。題文の下、霞が薄くなるあたりから下りる。
   sticky の中に置くと測る時のスクロール位置で動くので、表紙そのものに対して置く。 */
.cover__anchor {
  position: absolute;
  left: 50%;
  top: 84svh;
  width: 1px;
  height: 1px;
}

@supports (animation-timeline: scroll()) {
  .cover__cols {
    animation: hero-cols-out linear both;
    animation-timeline: scroll(root);
    animation-range: 0 110svh;
  }

  @keyframes hero-cols-out {
    to {
      transform: rotate(-5deg) scale(1.3);
      opacity: 0.25;
      filter: blur(5px);
    }
  }

  .cover__title {
    animation: hero-title-out linear both;
    animation-timeline: scroll(root);
    animation-range: 25svh 95svh;
  }

  @keyframes hero-title-out {
    to {
      opacity: 0;
      transform: translateY(-10vh) scale(0.9);
    }
  }

  .cover__wash {
    animation: hero-wash-in linear both;
    animation-timeline: scroll(root);
    animation-range: 0 100svh;
  }

  @keyframes hero-wash-in {
    to {
      background: radial-gradient(
        ellipse 70% 55% at 50% 52%,
        #eef3f4 0,
        #eef3f4 60%,
        rgba(238, 243, 244, 0.85) 100%
      );
    }
  }
}

/* scroll 連動が無いブラウザでは、留まらない 100svh の静止した表紙にする。
   柱の流れだけが残ると、拡がって薄れる先が無いまま動き続けることになる。 */
@supports not (animation-timeline: scroll()) {
  .cover {
    height: 100svh;
    min-height: 560px;
  }

  /* sticky を外す。static にすると絶対配置の柱が基準を失い、上端に写真の無い帯が出る。 */
  .cover__pin {
    position: relative;
    height: 100%;
  }

  .cover__col {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cover {
    height: 100svh;
    min-height: 560px;
  }

  /* sticky を外す。static にすると絶対配置の柱が基準を失い、上端に写真の無い帯が出る。 */
  .cover__pin {
    position: relative;
    height: 100%;
  }

  .cover__col,
  .cover__cols,
  .cover__title,
  .cover__wash {
    animation: none !important;
  }
}

/* ---------- 一日の流れ ---------- */

.day {
  padding-top: var(--sp-8);
}

.day + .day {
  padding-top: var(--sp-7);
}

.day__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-6);
  padding-left: calc(var(--rail) + var(--sp-3));
}

.day__date {
  font-family: var(--mincho);
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.day__weekday {
  font-family: var(--figure);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--ink-soft);
}

.stops {
  list-style: none;
  margin: 0;
  padding: 0;
}

.stop {
  position: relative;
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  column-gap: var(--sp-3);
  padding-bottom: 40px;
}

/* 主要な地点（11:00 の江ノ島、18:00 のディナー、20:00 の塔）は時刻を大きく、
   前後の余白も広く取る。小さな地点はそのまま詰める。 */
.stop--major {
  padding-bottom: 80px;
}

.stop--major .stop__time {
  font-size: 32px;
}

.stop:last-child {
  padding-bottom: 0;
}

/* 話題カードから /#leave で戻ってきたとき、地点が画面の上端に貼り付かないように */
.stop {
  scroll-margin-top: var(--sp-6);
}

/* 地図の SVG は viewBox だけで固有幅 430px を持つので、min-width: auto のままだと
   地点の列をそこまで押し広げて紙面から溢れる。 */
.stop__body,
.stop .map-section {
  min-width: 0;
}

.stop__dot {
  width: 9px;
  height: 9px;
  margin: 9px auto 0;
  border-radius: 50%;
  background: var(--mist);
  border: 1.6px solid var(--ink-soft);
}

.stop--sea .stop__dot {
  background: var(--sea);
  border-color: var(--sea);
  width: 11px;
  height: 11px;
  margin-top: 8px;
}

.stop--tower .stop__dot {
  background: var(--tower);
  border-color: var(--tower);
  width: 11px;
  height: 11px;
  margin-top: 8px;
}

.stop__time {
  display: block;
  font-family: var(--figure);
  font-style: italic;
  font-size: var(--fs-time);
  line-height: 1;
  color: var(--ink-soft);
  font-variant-numeric: lining-nums tabular-nums;
}

.stop__time--word {
  font-family: var(--mincho);
  font-style: normal;
  font-size: 15px;
  letter-spacing: 0.06em;
}

.stop__timenote {
  display: inline-block;
  margin-left: var(--sp-2);
  font-family: var(--gothic);
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.stop__place {
  margin: var(--sp-2) 0 0;
  font-family: var(--mincho);
  font-weight: 500;
  font-size: var(--fs-place);
  line-height: 1.35;
  letter-spacing: 0.03em;
}

.stop__note {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-note);
  line-height: 1.75;
  color: var(--ink-soft);
}

.stop__tag {
  display: inline-block;
  margin-top: var(--sp-3);
  padding-left: 13px;
  position: relative;
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  color: var(--sea);
}

.stop__tag::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 1px;
  background: currentColor;
}

.stop--tower .stop__tag {
  color: var(--tower);
}

.stop__media {
  margin-top: var(--sp-4);
  overflow: hidden;
}

.stop__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 移動の地点は横 3:2。江ノ島と塔だけ下の .stop--feature で縦 4:5 にする。 */
  aspect-ratio: 3 / 2;
  transform: scale(1.035);
  transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 枠は動かさず、内側の写真だけを一度きり寄せる。 */
.stop__media.is-in img {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .stop__media img {
    transform: none;
    transition: none;
  }
}

/* 江ノ島と東京タワーだけ縦 4:5 で右端まで抜けて、縦一本の流れに変化をつける */
.stop--feature .stop__media {
  margin-right: calc(var(--gutter) * -1);
}

.stop--feature .stop__media img {
  aspect-ratio: 4 / 5;
}

/* ---------- 第5版: 節ごとの静かな地色 ---------- */

.stop[data-tint]::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--gutter) * -1);
  right: calc(var(--gutter) * -1);
  z-index: -1;
  pointer-events: none;
  background: var(--tint);
}

.stop[data-tint="sea"] {
  --tint: rgba(47, 127, 138, 0.04);
}

.stop[data-tint="lamp"] {
  --tint: rgba(242, 184, 91, 0.04);
}

/* 色が変わるところだけ上下 64px でにじませる。同じ色が続く地点の境では切らない。 */
.stop.is-tint-head::before {
  mask-image: linear-gradient(transparent 0, #000 64px);
}

.stop.is-tint-foot::before {
  mask-image: linear-gradient(#000 calc(100% - 64px), transparent 100%);
}

.stop.is-tint-head.is-tint-foot::before {
  mask-image: linear-gradient(transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}

/* ---------- 江ノ島の地図 ---------- */

/* 「江ノ島」の地点の中に常設する。地点の本文はすでに線の右にあるので、
   節としての字下げは要らない。 */
.map-section {
  padding-inline: 0;
  padding-top: var(--sp-7);
}

.map-section__title {
  margin: 0;
  font-family: var(--mincho);
  font-weight: 500;
  font-size: var(--fs-h2);
  letter-spacing: 0.08em;
}

.map-section__lead {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-note);
  color: var(--ink-soft);
}

.map-controls {
  margin: var(--sp-5) calc(var(--gutter) * -1) 0 0;
  padding: 0 var(--gutter) 0 0;
}

.map-search {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  border-bottom: 1px solid rgba(30, 37, 64, 0.16);
  padding-bottom: var(--sp-2);
}

.map-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font-size: 14px;
  padding: var(--sp-1) 0;
}

.map-search input::placeholder {
  color: var(--ink-soft);
  opacity: 0.75;
}

.map-search__icon {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--ink-soft);
}

.chips {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding-bottom: var(--sp-2);
  overflow-x: auto;
  scrollbar-width: none;
}

.chips::-webkit-scrollbar {
  display: none;
}

.chip {
  flex: none;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(30, 37, 64, 0.18);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: color 160ms, border-color 160ms, background-color 160ms;
}

.chip[aria-pressed="true"] {
  color: var(--mist);
  background: var(--ink);
  border-color: var(--ink);
}

.map-views {
  margin: var(--sp-4) calc(var(--gutter) * -1) 0 0;
  aspect-ratio: 430 / 520;
  max-height: 74svh;
  min-height: 400px;
}

.walk {
  position: relative;
  height: 100%;
}

.map-empty {
  margin: var(--sp-3) 0 0;
  font-size: 12.5px;
  color: var(--ink-soft);
}

/* ---------- 第6版: 地図の下の一覧 ---------- */

/* 枠も罫も足さない。種別を左に落として、文字の大小と余白だけで行を切る。 */
.guide {
  margin-top: var(--sp-6);
}

.guide__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid rgba(30, 37, 64, 0.16);
}

.guide__title {
  margin: 0;
  font-family: var(--mincho);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.06em;
}

.guide__count {
  font-size: 13px;
  color: var(--ink-soft);
}

.guide__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.guide__row {
  display: grid;
  grid-template-columns: 24px 1fr 46px;
  column-gap: var(--sp-2);
  align-items: start;
  padding: var(--sp-4) 0;
}

.guide__row--plain {
  grid-template-columns: 24px 1fr;
}

.guide__row + .guide__row {
  border-top: 1px solid rgba(30, 37, 64, 0.08);
}

/* 左の列は地図と同じ番号。地図の丸（.wmark--stop）と同じ大きさ・同じ色にして、同じものだと分かるようにする。 */
.guide__kind {
  padding-top: 2px;
}

.guide__num {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--ink);
  border: 1.5px solid var(--mist);
  color: var(--mist);
  font-size: 9.5px;
  font-style: italic;
  line-height: 1;
}

.guide__type {
  display: block;
  font-family: var(--mincho);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--sea);
  margin-bottom: 2px;
}

.guide__name {
  display: block;
  font-family: var(--mincho);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.03em;
  text-align: left;
  color: var(--ink);
  /* 押せることは下線で示す。ボタンらしい面は足さない。 */
  border-bottom: 1px solid rgba(30, 37, 64, 0.22);
  padding-bottom: 1px;
}

.guide__note,
.guide__mission {
  display: block;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink-soft);
  word-break: auto-phrase;
}

.guide__note {
  margin-top: var(--sp-1);
}

.guide__mission {
  margin-top: 2px;
  color: var(--sea);
}

/* 判は行の右端。ミッションの文は本文側に出してあるので、ここは印だけ。 */
.guide__stamp {
  grid-column: 3;
  grid-row: 1;
  display: block;
  width: 44px;
  min-height: 44px;
}

.guide__none {
  margin: var(--sp-4) 0 0;
  font-size: 12.5px;
  color: var(--ink-soft);
}

/* スポットのモーダル。閉じる手は ×・backdrop・Esc の3つ。 */
.spot {
  width: min(100vw, 430px);
  max-width: 100%;
  max-height: 100svh;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  overflow: visible;
}

.spot::backdrop {
  background: rgba(30, 37, 64, 0.32);
}

/* body ごと浮かせて背景を止める。top は開いたときのスクロール位置を map.js が入れる。 */
.has-modal,
.has-modal body {
  overflow: hidden;
}

.has-modal body {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}

.spot__panel {
  position: relative;
  max-height: 92svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--mist);
  border-top: 1px solid rgba(30, 37, 64, 0.14);
  box-shadow: 0 -18px 40px -28px rgba(30, 37, 64, 0.6);
  padding-bottom: calc(var(--safe-bottom) + var(--sp-5));
}

@media (min-width: 900px) {
  .spot {
    margin: auto;
  }

  .spot__panel {
    border: 1px solid rgba(30, 37, 64, 0.14);
    padding-bottom: var(--sp-5);
  }
}

.spot__close {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  z-index: 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--mist);
  box-shadow: 0 2px 10px -4px rgba(30, 37, 64, 0.5);
}

.spot__close svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 1.4;
  stroke-linecap: round;
}

.spot__photo:empty {
  display: none;
}

/* 写真だけで画面が埋まらないように頭を打つ。本文まで一度に見えることを優先する。 */
.spot__photo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 34svh;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.spot__text {
  padding: var(--sp-5) var(--gutter) 0;
}

.spot__step {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--sea);
}

.spot__step:empty {
  display: none;
}

.spot__name {
  margin: var(--sp-1) 0 0;
  font-family: var(--mincho);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: 0.03em;
}

.spot__desc {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-note);
  line-height: 1.75;
  color: var(--ink-soft);
}

.spot__meta {
  margin: var(--sp-4) 0 0;
  display: grid;
  gap: var(--sp-1);
  font-size: 12.5px;
  color: var(--ink-soft);
}

.spot__meta div {
  display: grid;
  grid-template-columns: 4.5em 1fr;
  gap: var(--sp-2);
}

.spot__meta dt {
  letter-spacing: 0.1em;
  font-size: 11px;
  padding-top: 1px;
}

.spot__meta dd {
  margin: 0;
  color: var(--ink);
}

.spot__mission {
  margin: var(--sp-4) 0 0;
  padding-left: var(--sp-3);
  border-left: 2px solid var(--sea);
  font-size: 12.5px;
  line-height: 1.7;
}

.spot__mission:empty {
  display: none;
}

.spot__trivia:empty {
  display: none;
}

.spot__trivia {
  margin-top: var(--sp-4);
}

.spot__actions {
  margin-top: var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.spot__maps {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--sea);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

.spot__heart {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--ink-soft);
}

.spot__heart svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  transition: fill 200ms, color 200ms;
}

.spot__heart[aria-pressed="true"] {
  color: var(--sea);
}

.spot__heart[aria-pressed="true"] svg {
  fill: currentColor;
}

/* ---------- 支度 ---------- */

.kit {
  padding-top: var(--sp-9);
}

.kit__title {
  margin: 0 0 var(--sp-5);
  padding-left: calc(var(--rail) + var(--sp-3));
  font-family: var(--mincho);
  font-weight: 500;
  font-size: var(--fs-h2);
  letter-spacing: 0.08em;
}

.kit__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kit__button {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  column-gap: var(--sp-3);
  width: 100%;
  min-height: 44px;
  padding: var(--sp-5) 0;
  text-align: left;
}

.kit__box {
  background: var(--mist);
  width: 14px;
  height: 14px;
  margin: 5px auto 0;
  border: 1.4px solid var(--ink-soft);
  border-radius: 3px;
  position: relative;
}

.kit__box::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--sea);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(42deg) scale(0.5);
  opacity: 0;
  transition: opacity 160ms, transform 160ms;
}

.kit__button[aria-pressed="true"] .kit__box {
  border-color: var(--sea);
}

.kit__button[aria-pressed="true"] .kit__box::after {
  opacity: 1;
  transform: rotate(42deg) scale(1);
}

.kit__title-line {
  font-family: var(--mincho);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.03em;
  display: inline-block;
  position: relative;
}

.kit__title-line::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: 52%;
  height: 1px;
  background: var(--ink-soft);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms ease-out;
}

.kit__button[aria-pressed="true"] .kit__title-line::after {
  transform: scaleX(1);
}

.kit__button[aria-pressed="true"] .kit__text {
  color: var(--ink-soft);
}

.kit__note {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-note);
  color: var(--ink-soft);
  line-height: 1.7;
}

/* ---------- 結び ---------- */

.finale {
  padding-top: var(--sp-9);
  padding-bottom: var(--sp-7);
  text-align: center;
}

.finale__lines {
  margin: 0;
  word-break: auto-phrase;
  font-family: var(--mincho);
  font-weight: 500;
  font-size: 23px;
  line-height: 1.9;
  letter-spacing: 0.05em;
}

.finale__lines span {
  display: block;
}

.finale__tower {
  position: relative;
  width: 120px;
  height: 220px;
  margin: var(--sp-7) auto 0;
}

footer {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  padding: var(--sp-5) var(--gutter) calc(var(--safe-bottom) + var(--sp-6));
  font-size: var(--fs-small);
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  border-top: 1px solid rgba(30, 37, 64, 0.1);
  margin: 0 var(--gutter);
}

footer .figure {
  font-size: 13px;
}

/* ---------- 第5版: 開幕の一連と題文 ---------- */

/*
 * 上下 2 枚の幕。継ぎ目に水平線を引いてから上下へ送り、柱の表紙を出す。
 * JS が html に付けるクラスでだけ出し、時間切れで必ず外れる。
 */
.opening {
  display: none;
}

html.is-opening .opening {
  display: block;
}

html.is-opening {
  overflow: hidden;
}

/* 幕が割れはじめたら、もう本文に触れてよい。 */
html.is-parting {
  overflow: visible;
}

.opening__veil {
  position: fixed;
  left: 0;
  right: 0;
  height: 50svh;
  z-index: 50;
  background: var(--mist);
  transition: transform 1200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.opening__veil--top {
  top: 0;
}

.opening__veil--bottom {
  bottom: 0;
}

html.is-parting .opening__veil--top {
  transform: translateY(-100%);
}

html.is-parting .opening__veil--bottom {
  transform: translateY(100%);
}

.opening__horizon {
  position: fixed;
  left: 0;
  right: 0;
  top: 50svh;
  height: 2px;
  z-index: 51;
  overflow: visible;
  pointer-events: none;
}

.opening__horizon path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1;
  opacity: 0.55;
}

/* 幕が割れはじめたら線は消す。柱の上に残すと 1 本の線と紛れる。 */
html.is-parting .opening__horizon {
  opacity: 0;
  transition: opacity 400ms ease-out;
}

.opening-skip {
  display: none;
}

html.is-opening .opening-skip {
  display: block;
  position: fixed;
  right: var(--gutter);
  bottom: calc(var(--safe-bottom) + var(--sp-3));
  z-index: 52;
  min-height: 44px;
  padding: 0 var(--sp-2);
  font-size: var(--fs-small);
  letter-spacing: 0.14em;
  color: var(--ink-soft);
}

/* 幕が割れはじめたらスキップする対象がもう無い。 */
html.is-parting .opening-skip {
  display: none;
}

/* 題文は幕が開ききってから、上から順に出す。 */
.cover__title > * {
  opacity: 0;
  transform: translateY(10px);
}

.cover.is-typed .cover__title > * {
  opacity: 1;
  transform: none;
  transition:
    opacity 700ms ease-out,
    transform 700ms ease-out;
}

.cover.is-typed .cover__title > :nth-child(2) {
  transition-delay: 150ms;
}
.cover.is-typed .cover__title > :nth-child(3) {
  transition-delay: 300ms;
}
.cover.is-typed .cover__title > :nth-child(4) {
  transition-delay: 600ms;
}
.cover.is-typed .cover__title > :nth-child(5) {
  transition-delay: 750ms;
}
.cover.is-typed .cover__title > :nth-child(6) {
  transition-delay: 900ms;
}

/* 開幕を省く再訪と reduced motion では、完成した状態を即座に出す。 */
.cover.is-instant .cover__title > * {
  opacity: 1;
  transform: none;
  transition: none;
}

.cover__countdown {
  margin: var(--sp-4) 0 0;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}


/* ---------- 第2版: 旅のミッション ---------- */

.day__score {
  margin-left: auto;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.missions {
  list-style: none;
  margin: var(--sp-7) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}

.mission__button {
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 46px;
  text-align: left;
}

.mission__stamp {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
}

.mission__ring {
  position: absolute;
  inset: 0;
  border: 1.2px dashed rgba(30, 37, 64, 0.22);
  border-radius: 50%;
}

.mission__word {
  font-family: var(--mincho);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-align: center;
  color: var(--sea);
  opacity: 0;
  transform: scale(1.35) rotate(-6deg);
}

.mission__button[aria-pressed="true"] .mission__ring {
  border-style: solid;
  border-width: 1.2px;
  border-color: var(--sea);
  filter: url(#stamp-ink);
}

.mission__button[aria-pressed="true"] .mission__word {
  opacity: 1;
  transform: none;
  transition:
    opacity 260ms ease-out,
    transform 260ms cubic-bezier(0.34, 1.3, 0.64, 1);
  filter: url(#stamp-ink);
}

.mission__text {
  font-size: var(--fs-note);
  line-height: 1.6;
  color: var(--ink);
}

.mission__spot {
  display: block;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.mission__button[aria-pressed="true"] .mission__text {
  color: var(--ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  .mission__word {
    transition: none !important;
  }
}

/* ---------- 第2版: 5年前のこの場所 ---------- */

.then {
  margin-top: var(--sp-5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.then figure {
  margin: 0;
}

.then__label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-bottom: var(--sp-1);
}

.then__frame {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.then__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.then__frame--empty {
  border: 1px dashed rgba(30, 37, 64, 0.26);
  display: grid;
  place-items: center;
}

.then__wait {
  font-family: var(--mincho);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--ink-soft);
}

.then__caption {
  margin: var(--sp-2) 0 0;
  font-family: var(--mincho);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ---------- 第2版: ひとくちメモ ---------- */

.trivia {
  list-style: none;
  margin: var(--sp-7) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
}

.trivia__title {
  display: block;
  font-family: var(--mincho);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--sea);
}

.trivia__body {
  display: block;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* ---------- 第2版: 東京タワーの光点とディナーの後 ---------- */

.stop__dusk {
  margin: var(--sp-2) 0 0;
  font-family: var(--mincho);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.stop__after {
  margin: var(--sp-3) 0 0;
  font-family: var(--mincho);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.stop__media {
  position: relative;
}

.stop__glow {
  position: absolute;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--lamp);
  box-shadow: 0 0 10px 3px rgba(242, 184, 91, 0.55);
  opacity: 0;
  transition: opacity 1500ms ease-out;
}

.stop__glow.is-lit {
  opacity: 0.9;
}

@media (prefers-reduced-motion: reduce) {
  .stop__glow {
    opacity: 0.9;
    transition: none;
  }
}

/* ---------- 第2版: 歩く地図 ---------- */

.walk__canvas {
  width: 100%;
  height: 100%;
  background: var(--mist);
}

.walk__locate {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--mist);
  border: 1px solid rgba(30, 37, 64, 0.18);
  border-radius: 50%;
}

.walk__locate svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 1.3;
  stroke-linecap: round;
}

.walk__locate[aria-pressed="true"] svg {
  stroke: var(--tower);
}

.walk__locate[aria-pressed="true"] .walk__locate-dot {
  fill: var(--tower);
}

.walk__status {
  position: absolute;
  top: calc(var(--sp-3) + 50px);
  right: var(--sp-3);
  z-index: 2;
  margin: 0;
  font-size: 11.5px;
  color: var(--ink);
  background: var(--mist);
  padding: 2px 8px;
}

.walk__status:empty {
  display: none;
}

.walk__next {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--sp-6);
  z-index: 2;
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  background: var(--mist);
  border-left: 2px solid var(--sea);
  font-size: 13px;
  letter-spacing: 0.02em;
}

.walk__credit {
  position: absolute;
  right: 4px;
  bottom: 2px;
  z-index: 2;
  margin: 0;
  font-size: 10px;
  color: var(--ink-soft);
  background: rgba(238, 243, 244, 0.8);
  padding: 0 4px;
}

/* 地図のマーカー。名前は symbol レイヤーが出すので、ここは点だけ。
   ink-soft を基本にし、交通だけ sea にして足の層だと分かるようにする。 */
.wmark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  transform: translateY(22px);
}

.wmark__dot {
  display: grid;
  place-items: center;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink-soft);
  border: 1.5px solid var(--mist);
}

.wmark.is-famous .wmark__dot {
  width: 12px;
  height: 12px;
}

/* is-famous より詳細度を上げる。順路の地点は famous でも番号が入る大きさで出す。 */
.wmark.wmark--stop .wmark__dot {
  width: 19px;
  height: 19px;
  background: var(--ink);
}

.wmark__step {
  font-size: 9.5px;
  font-style: italic;
  line-height: 1;
  color: var(--mist);
}

.wmark.is-hidden {
  display: none;
}

.wmark--transit .wmark__dot {
  background: var(--sea);
}

.wmark.is-done .wmark__dot {
  background: var(--tower);
}

/* ---------- v3: 表紙の天気 ---------- */

.cover__meta {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.cover__weather {
  margin: var(--sp-2) 0 0;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.cover.is-typed .cover__weather {
  opacity: 1;
  transition: opacity 600ms ease-out;
}

.cover.is-instant .cover__weather {
  opacity: 1;
  transition: none;
}

/* ---------- v3: あの日の待ち合わせ ---------- */

/* 節まるごと紙片と同じ左端に寄せる。左を空けないと一本の線が見出しと罫を横切る。 */
.firstchat {
  padding-top: var(--sp-8);
  padding-left: calc(var(--gutter) + var(--rail) + var(--sp-3));
}

.firstchat__label {
  display: block;
  font-size: 17px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.firstchat__title {
  margin: var(--sp-1) 0 var(--sp-5);
  font-family: var(--mincho);
  font-weight: 500;
  font-size: var(--fs-h2);
  letter-spacing: 0.08em;
}

/* ---------- 第5版: 会話の組 ---------- */

.chatgroup + .chatgroup {
  margin-top: 40px;
}

.chatgroup__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid rgba(30, 37, 64, 0.08);
}

.chatgroup__date {
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.chatgroup__title {
  font-family: var(--mincho);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
}

.chatgroup__note {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-small);
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  word-break: auto-phrase;
}

.chatgroup .slips {
  margin-top: var(--sp-4);
  gap: 0;
}

/* 紙らしく。縁は外して、置かれた影だけで浮かせる。 */
.chatgroup .slip {
  width: auto;
  max-width: 88%;
  justify-self: start;
  margin: 26px 0 0;
  padding: 14px 16px 22px;
  border: 0;
  box-shadow:
    0 1px 0 rgba(30, 37, 64, 0.06),
    0 8px 24px -18px rgba(30, 37, 64, 0.35);
}

/* 夏の紙片は右へ寄せて、左に sea の縦線を 1 本。 */
.chatgroup .slip--her {
  justify-self: end;
  border-left: 2px solid var(--sea);
}

/* 同じ人が続くあいだは詰め、人が替わると開き、日付が変わるところでさらに開く。
   名前を出さない連投は、その分の隙間も要らない。 */
.chatgroup .slip--same {
  margin-top: 4px;
}

.chatgroup .slip--newday {
  margin-top: 38px;
}

/* 送信者名は紙片の外の上。同じ人が続くあいだは出さない。 */
.chatgroup .slip__who {
  top: -15px;
  right: auto;
  left: 0;
  font-size: 10px;
  letter-spacing: 0.14em;
}

.chatgroup .slip--her .slip__who {
  left: auto;
  right: 0;
}

.chatgroup .slip--same .slip__who {
  display: none;
}

.chatgroup .slip__text {
  padding-right: 0;
}

.chatgroup .slip__time {
  position: absolute;
  right: 12px;
  bottom: 6px;
  margin: 0;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

/* 紙片に後から書き込んだ一言。手書きの書き込みのつもりなので、紙の外に置いて
   罫 1 本だけを添える。紙片の送りには乗せない。 */
.slipnote {
  justify-self: start;
  max-width: 78%;
  margin: 8px 0 0;
  padding-left: var(--sp-2);
  border-left: 1px solid rgba(30, 37, 64, 0.25);
  font-size: var(--fs-small);
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  word-break: auto-phrase;
}

/* ---------- 第5版: あの日の夜（手紙の体裁） ---------- */

.chatletters {
  list-style: none;
  margin: var(--sp-5) 0 0;
}

.chatletter {
  position: relative;
  padding-left: var(--sp-4);
  border-left: 1px solid rgba(30, 37, 64, 0.35);
}

.chatletter + .chatletter {
  margin-top: var(--sp-6);
}

.chatletter__text {
  margin: 0;
  font-family: var(--mincho);
  font-weight: 500;
  font-size: 15px;
  line-height: 2;
  letter-spacing: 0.03em;
  word-break: auto-phrase;
}

.chatletter__time {
  display: block;
  margin-top: var(--sp-2);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.firstchat__foot {
  margin: var(--sp-7) 0 0;
  text-align: right;
  font-family: var(--mincho);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}

/* 9/28 の最後に置く「あの日の夜」。行程の <ol> の中に並ぶ。 */
.afterchat {
  list-style: none;
  padding: var(--sp-7) 0 0 calc(var(--rail) + var(--sp-3));
}

/* ---------- 店名と、お店のページ ---------- */

.venue {
  margin-top: var(--sp-4);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: var(--sp-3);
  row-gap: var(--sp-1);
  border-top: 1px solid rgba(30, 37, 64, 0.12);
  padding-top: var(--sp-3);
}

.venue__name {
  font-family: var(--mincho);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.03em;
}

.venue__link {
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(30, 37, 64, 0.3);
}

/* ---------- 第5版: 車内の話題カードへの入口 ---------- */

.talk {
  margin-top: var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  border-top: 1px solid rgba(30, 37, 64, 0.12);
  border-bottom: 1px solid rgba(30, 37, 64, 0.12);
  padding: var(--sp-3) 0;
}

.talk__lead {
  margin: 0;
  font-family: var(--mincho);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.03em;
  word-break: auto-phrase;
}

.talk__open {
  flex: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--sp-4);
  border: 1px solid var(--sea);
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--sea);
  text-decoration: none;
}

/* ---------- v3: 2026 の枠をその場で埋める ---------- */

.then__frame--empty .capture__wait {
  font-family: var(--mincho);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--ink-soft);
}

.then__frame--empty .capture__hint {
  font-size: 10px;
  letter-spacing: 0.06em;
}

/* 撮った後は点線の枠を外す */
.then__frame--empty:has(.capture.is-filled) {
  border-color: transparent;
}

.then__frame--empty .capture__redo {
  background: rgba(238, 243, 244, 0.86);
  color: var(--ink-soft);
}

/* ---------- v3: 当日モード ---------- */

.stop.is-now .stop__dot {
  background: var(--lamp);
  border-color: var(--lamp);
  width: 13px;
  height: 13px;
  margin-top: 7px;
  box-shadow: 0 0 12px 3px rgba(242, 184, 91, 0.5);
}

.stop__next {
  margin: var(--sp-2) 0 0;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--sea);
}


/* ---------- 第6版: 2021 から 2026 へ渡る ---------- */

/*
 * 待ち合わせ（2021）と行程（2026）のあいだ。節を画面に貼り付けて、
 * そのあいだに年号が 1 年ずつ進み、その年の写真が重なりで入れ替わる。
 * 貼り付けずに横へ流していたときは、ページも縦に進むので写真が通り過ぎるだけだった。
 *
 * 貼り付けない状態（scroll 連動なし・reduce）が既定で、そのときは 1 画面に
 * 年号の 1 行と各年の写真を並べる。外側の 300svh は下の @supports の中だけで持たせる。
 */
.bridge {
  display: grid;
  /* 一本の線より上に置く。写真の下を線がくぐって、写真の下からまた出る。 */
  z-index: 5;
  /* 写真の列は紙面より長くなりうる。列を 100% に固定しないと、その長さまで列が伸びる。 */
  grid-template-columns: 100%;
  align-content: start;
  padding-inline: 0;
  overflow: clip;
}

.bridge__pin {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--sp-6);
  /* 貼り付けない側では、写真が何枚あっても縦に伸びて全部見えるようにする。 */
  min-height: 100svh;
  min-width: 0;
  overflow: clip;
}

.bridge__years {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  min-width: 0;
}

.bridge__frame {
  display: flex;
  flex: none;
  gap: 8px;
  align-items: flex-start;
  justify-content: center;
}

.bridge__frame img {
  width: auto;
  height: 22svh;
  max-height: 190px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 3px;
  filter: saturate(0.85) contrast(0.95);
}

.bridge__title {
  margin: 0;
  text-align: center;
  font-size: min(88px, 24vw);
  line-height: 1;
  color: var(--ink);
}

/* 既定は静止した「2021 → 2026」。送れないなら年号は並べて見せるほうが読める。 */
.bridge__span {
  font-size: 0.42em;
  letter-spacing: 0.04em;
}

.bridge__roll {
  display: none;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /*
     * 外側に 3 画面ぶんの尺を持たせ、内側を貼り付ける。指で 2〜3 回はらうと抜ける。
     * 貼り付いているのは、節の上端が画面の上に着いてから下端が画面の下に着くまでで、
     * view() の cover で測ると 25% から 75% にあたる。年号と写真の範囲はこの中に置く。
     */
    .bridge {
      height: 300svh;
      view-timeline: --bridge block;
    }

    .bridge__pin {
      position: sticky;
      top: 0;
      gap: var(--sp-5);
    }

    .bridge__span {
      display: none;
    }

    /* 年号は 1 年ぶんの窓で覗く。steps で 1 年ずつ送るので、数字が中途半端な位置に止まらない。
       表紙の「9.28」と同じ格で置く。 */
    .bridge__title {
      font-size: min(128px, 32vw);
    }

    .bridge__roll {
      display: block;
      height: 1.1em;
      overflow: clip;
    }

    .bridge__nums {
      display: block;
      animation: bridge-years steps(var(--y), jump-none) both;
      animation-timeline: --bridge;
      /* 1 年ぶんが cover の 8%。6 年で 48% を使い、残りは抜けるまでの余り。 */
      animation-range: cover 25% cover 73%;
    }

    .bridge__nums span {
      display: block;
      height: 1.1em;
    }

    @keyframes bridge-years {
      to {
        transform: translateY(calc(-100% * (var(--y) - 1) / var(--y)));
      }
    }

    /* 年ごとの写真は同じ場所に重ねて置き、その年の番のあいだだけ出す。
       1 年の幅は年号と同じ「48% を年数で割った値」。前後に 1.5% ずつはみ出させて重なりを作る。 */
    .bridge__years {
      display: grid;
      grid-template-columns: 100%;
    }

    .bridge__frame {
      --span: calc(48% / var(--y));
      grid-area: 1 / 1;
      animation: bridge-frame linear both;
      animation-timeline: --bridge;
      animation-range: cover calc(23.5% + var(--i) * var(--span)) cover
        calc(26.5% + (var(--i) + 1) * var(--span));
    }

    .bridge__frame img {
      height: 42svh;
      max-height: 400px;
    }

    /* 2 枚目は肩を落として添える。同じ高さで並べると証明写真に見える。 */
    .bridge__frame img + img {
      height: 30svh;
      max-height: 290px;
      margin-top: 9svh;
    }

    @keyframes bridge-frame {
      from {
        opacity: 0;
        transform: scale(0.97);
      }
      18% {
        opacity: 1;
      }
      82% {
        opacity: 1;
      }
      to {
        opacity: 0;
        transform: scale(1.05);
      }
    }
  }
}

/* ==================== 第6版: スクロールに結んだ動き ==================== */

/*
 * 表紙と同じ質の動きを下の節にも広げる。進行はすべてスクロール量に結び、
 * 既定値のほうを「動き終わった状態」にしてある。
 * scroll-driven animation を持たないブラウザではこの塊ごと無視され、完成形が静止して出る。
 * 100% の keyframe は書かない。省くと要素が本来持つ値がそのまま終端になるので、
 * .stop__time--word のように字間の違う変種を個別に書き分けずに済む。
 */
@supports (animation-timeline: view()) {
  /* 地点の写真。枠は動かさず、内側だけ下へ送る。
     cover のまま 1.1 に寄せてあるぶん（上下 5%）の中で ±4% に収めるので、枠に隙間は出ない。 */
  .stop__media img {
    transition: none;
    animation: stop-media-parallax linear both;
    animation-timeline: view();
  }

  @keyframes stop-media-parallax {
    from {
      transform: scale(1.1) translateY(-4%);
    }
    to {
      transform: scale(1.1) translateY(4%);
    }
  }

  /* 時刻・場所名・一言は、この順に少しずつ遅らせて下から入れる。
     範囲を entry ではなく cover で測るのは、entry の長さが要素の高さそのもので、
     1 行の文字だと 20px ぶんのスクロールで終わってしまうため。 */
  .stop__time {
    animation: stop-time-in linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 14%;
  }

  @keyframes stop-time-in {
    from {
      opacity: 0;
      letter-spacing: 0.18em;
    }
  }

  .stop__place {
    animation: stop-line-in linear both;
    animation-timeline: view();
    animation-range: cover 4% cover 20%;
  }

  .stop__note {
    animation: stop-line-in linear both;
    animation-timeline: view();
    animation-range: cover 6% cover 22%;
  }

  @keyframes stop-line-in {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
  }

  /* 待ち合わせの紙片。50 通あるので、掛けるのは opacity と transform だけにする。
     順送りは紙片どうしの位置の差がそのまま出るので、遅延は要らない。 */
  .chatgroup .slip,
  .chatgroup .chatletter {
    animation: slip-in linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 16%;
  }

  @keyframes slip-in {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
  }

  /* 結びの塔。線の長さだけ JS が --len に入れ、引く進行はスクロールが持つ。
     タイムラインの相手は塔ではなく結びの節。塔だけだと、画面に入ってからページの末尾まで
     300px ほどしか残っておらず、一息で引き切ってしまう。 */
  .finale {
    view-timeline: --tower block;
  }

  .tower-line {
    stroke-dasharray: var(--len, none);
    animation: tower-draw linear both;
    animation-timeline: --tower;
    animation-range: entry 0% cover 36%;
  }

  @keyframes tower-draw {
    from {
      stroke-dashoffset: var(--len, 0);
    }
    to {
      stroke-dashoffset: 0;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .stop__media img,
  .stop__time,
  .stop__place,
  .stop__note,
  .chatgroup .slip,
  .chatgroup .chatletter,
  .tower-line {
    animation: none !important;
  }
}

/* ==================== PC 横長版（2ペイン） ==================== */

/*
 * 左 42% にその地点の絵を貼り付け、右 58% に行程が今の一列のまま流れる。
 * DOM はスマホ版と同じで、.stop__body を display: contents にして絵だけを左の列へ移す。
 */
@media (min-width: 900px) {
  body {
    padding: 0;
    background: #dde5e7;
  }

  .sheet {
    max-width: 1100px;
    box-shadow: none;
  }

  /* 左ペインを持たない節は、右の列の幅にそろえる */
  .firstchat,
  .kit,
  .day__head {
    padding-left: calc(42% + var(--rail) + var(--sp-3));
  }

  /* 行程の <ol> に並ぶ「あの日の夜」も、地点の本文と同じ右の列に置く。 */
  .afterchat {
    padding-left: calc(42% + var(--rail) + var(--sp-3));
  }

  /* ---------- 表紙 ---------- */

  /* 表紙は 2 ペインにせず、柱のまま紙面いっぱいに出す。
     柱が 1 本あたり 360px を超えると写真が大きすぎるので、そこで頭打ちにする。 */
  .cover__num {
    font-size: min(220px, 20vw);
  }

  .cover__num-end {
    font-size: min(68px, 6.2vw);
  }

  .cover__headline {
    font-size: 30px;
  }

  /* ---------- 一日の流れ ---------- */

  .stop {
    grid-template-columns: 42% var(--rail) 1fr;
    column-gap: var(--sp-3);
    padding-bottom: var(--sp-9);
  }

  .stop__body {
    display: contents;
  }

  .stop__body > * {
    grid-column: 3;
  }

  /* 絵は左の列に貼り付いて、その地点を読んでいるあいだ動かない */
  .stop .stop__media {
    grid-column: 1;
    grid-row: 1 / span 40;
    position: sticky;
    top: 0;
    align-self: start;
    height: 100svh;
    margin: 0 var(--sp-7) 0 0;
    opacity: 0.4;
    transition: opacity 400ms ease-out;
  }

  .stop.is-current .stop__media {
    opacity: 1;
  }

  /* 左ペインの絵は貼り付いたまま地点ぶん動かないので、視差を掛ける相手がいない。 */
  .stop .stop__media img {
    height: 100%;
    aspect-ratio: auto;
    animation: none;
  }

  .stop__dot {
    grid-column: 2;
    grid-row: 1;
  }

  /* ---------- 江ノ島の地図 ---------- */

  /*
   * 地点の中にあるので、左ペインはその地点の絵がすでに占めている。
   * 地図は右の列に一列のまま流し、貼り付けはしない。
   */
  .map-section {
    padding-inline: 0;
    margin-top: var(--sp-7);
  }

  .map-controls {
    margin-inline: 0;
    padding-inline: 0;
  }

  .map-views {
    margin-inline: 0;
    max-height: 90svh;
  }

  /* ---------- 結び ---------- */

  .finale {
    display: grid;
    grid-template-columns: 42% 1fr;
    column-gap: var(--sp-7);
    align-items: center;
    padding-inline: 0 var(--sp-7);
    text-align: left;
  }

  .finale__tower {
    grid-column: 1;
    margin: 0 auto;
  }

  .finale__lines {
    grid-column: 2;
  }

  footer {
    margin-inline: var(--sp-7);
  }
}

@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
  .stop .stop__media {
    opacity: 1;
    transition: none;
  }
}

@media (min-width: 900px) {
  /* モーダルも紙面の広さに合わせる */
  .spot {
    width: min(100vw, 520px);
  }
}