/* 原理圖鑑 · 單篇的補充樣式
   how.css 是 how-preview 的原版，刻意不動它，這一頁要加的規則放這裡。 */

/* 麵包屑對齊頂部那條控制列（.wd-controls .in 是 max-width:1120 / padding:10px 22px） */
.hw-crumb { max-width: 1120px; margin: 0 auto; padding: 14px 22px 0;
  box-sizing: border-box; }

/* ── 大螢幕：圖可以比文字欄寬 ─────────────────────────
 *
 * 紙寬是「字級 × 1.5 × 18 字」算出來的 —— 那個 18 是為了**文字**的
 * 可讀性（中文每行 15–20 字）。互動圖沒有這個限制：它是圖，不是行。
 *
 * 所以大螢幕上讓圖往兩側各撐出去一些，把紙張旁邊的留白用掉。
 * 撐出去的量不超過 .wd-body 的左右內距加一段，圓角才不會被切到。
 */
@media (min-width: 1100px) {
  .hw-hook { margin-left: -24px; margin-right: -24px; }
}
@media (min-width: 1400px) {
  .hw-hook { margin-left: -36px; margin-right: -36px; }
}