/* ストップの画面の配置と見た目（仕様書 F3-1・F3-3・F3-4。ストップのページだけが読む。見た目は案J の J5、T-140）。
   文字 200% でも横にはみ出さないよう、大きさは rem・em と % で書き、長い語は折り返す（TD3） */
.stop {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  /* 左右の空きは案J の 20 px。文字 200% でも題名の欄を狭めないよう、文字に合わせて広げない */
  padding: 0 20px;
  overflow-wrap: anywhere;
}

.stop-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.stop-heading h1 {
  flex: 1;
  min-width: 0;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.3;
}

.stop-heading > *,
.stop-reading-time,
.stop-script p {
  margin: 0;
}

/* 写真は 4:3 の枠に中央を切り抜いて出す（コンテンツモデル 7.1） */
.stop-photo img {
  display: block;
  border-radius: 4px;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* 写真の特記事項は写真の下に控えめな文字で出す（F3-10。控えめな文字は白の地と 4.5:1 以上） */
.stop-photo-note {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.stop-reading-time {
  align-self: flex-start;
  padding: 0.375rem 0.75rem;
  border-radius: 4px;
  background: var(--color-current);
  font-size: 0.8125rem;
  line-height: 1.3;
}

.stop-script {
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  font-size: 1.0625rem;
  line-height: 1.85;
}

/* 書き添え［ ］は音声で読まない文なので、本文より控えめな文字で区別する（C1・F3-2。TD12） */
.stop-script .aside {
  color: var(--color-text-muted);
  font-size: 0.9em;
}