/*
  本文の流し込み。列を読み順のままフラットに並べ、折り返し(段組み)は
  flex-wrap に任せる。画面幅が狭くなると1段に入る列数が自動的に減り、
  そのぶん段数が増えるので、横スクロールが発生しない。
  row-reverse + wrap で「右上から始まり左へ、行き止まったら次の段の右へ」
  という縦書きの読み順になる。
*/
.tate-flow {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  align-content: flex-start;
  max-width: 810px;
  margin-left: auto; /* 段は右寄せ(読み始めの右端を揃える) */
  row-gap: 17px;
  /*
    段の区切り線。段の刻み(305px)ごとに、本文の下端から
    16px 空けた位置に線を引く。背景として敷くので、
    その段の本文が左端まで届いていなくても線は段の幅いっぱいに伸びる。
  */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 288px,
    rgb(32, 32, 32) 288px,
    rgb(32, 32, 32) 289px,
    transparent 289px,
    transparent 305px
  );
}

.tate-col {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  /*
    ぶら下げ文字(.tate-compressed)の有無に関わらず、17文字目の下端が常に
    区切り線からpadding-bottomぶん離れた位置に来るよう、内容高さを
    「定員文字数ぶん」に固定する(auto だとぶら下げ文字の分だけ伸びてしまう)。
    ぶら下げ文字はこの高さの外側にはみ出して描画される。
    区切り線は .tate-flow の背景で引くので、ここでは引かない。
  */
  box-sizing: border-box;
  height: 288px;
  padding-bottom: 16px;
  flex-shrink: 0;
  /*
    white-space:nowrapが無いと、高さを固定した際に定員文字数+ぶら下げ文字が
    箱の高さを超えたとき「はみ出す」のではなく「折り返して2列目ができる」
    挙動になってしまう(vertical-rlではheightが行の折り返し幅にあたるため)。
    折り返しを禁止し、素直に下へはみ出させる。
  */
  white-space: nowrap;
}

/*
  本文中の画像。列と同じ箱として流れの中に置く。
  幅は本文列幅の整数倍(--image-columns)なので、画像が入った段でも
  段の幅が本文列幅で割り切れ、他の段と左右の端が揃う。
  高さは文字の列と同じにして、段の上下の位置と区切り線を崩さない。
  画像自体は object-fit:contain で箱に収める(縦横比は変えない)。
*/
.tate-image {
  box-sizing: border-box;
  margin: 0;
  width: calc(27px * var(--image-columns, 10));
  height: 288px;
  padding-bottom: 16px;
  flex-shrink: 0;
}

.tate-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/*
  埋め込み動画。画像と同じ寸法規則(高さは列と同じ、幅は本文列幅の整数倍)。
  iframeは画像と違って箱いっぱいに描かれ letterbox できないので、
  箱そのものが16:9になる列数を config で選んである。
  狭い画面では箱のほうが段より広くなることがあるため、max-width で抑える。
*/
.tate-embed {
  box-sizing: border-box;
  margin: 0;
  width: calc(27px * var(--embed-columns, 18));
  max-width: 100%;
  height: 288px;
  padding-bottom: 16px;
  flex-shrink: 0;
}

.tate-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.tate-col[data-style="body"] {
  font-size: 16px;
  width: 27px;
}

.tate-col[data-style="h2"] {
  font-size: 18px;
  width: 54px;
}

.tate-col[data-style="h1"] {
  font-size: 21px;
  width: 54px;
}

.tate-col[data-style="meta"] {
  font-size: 12px;
  width: 27px;
}

/*
  句読点・閉じ括弧の追い込み。定員文字数の外側に詰めて表示する
  (原稿用紙で句点+閉じ括弧を1マスに収める慣習)。
  display:block にすると縦書きでは列の高さいっぱいに広がってしまうため、
  普通の文字の続きとして流れる inline のままにする。
*/
.tate-compressed {
  font-size: 1em; /* 通常サイズのまま詰める */
}