/* ═══════════════════════════════════════════════════════════════════════════
   拾尘 · 收口补丁（Lead）
   1) 移动端横向溢出：根因是 .plate / .frame 这条链在窄屏把文档撑宽（526 > 492），
      连带「灯」工具被挤出去半截、主画副标题被切尾。
      grid 子项默认 min-width:auto，会被内部 <img> 的固有宽度顶住 —— 这里逐个放行。
   2) overflow-x: clip 只是最后一道保险，不是解药；真正的解法是上面的 min-width。
   赭石若在 src/css/ 里给出正式修法，这个文件可以直接删掉，index.html 里那行 link 一并删。
   ═══════════════════════════════════════════════════════════════════════════ */

.plate,
.plate__figure,
.plate__side,
.artwork,
.artwork__figure,
.frame,
.frame--small,
.frame__mat,
.frame__lip { min-width: 0; }

.frame__img { max-width: 100%; }

@media (max-width: 640px) {
  .plate { grid-template-columns: minmax(0, 1fr); }
  .plate__side { min-width: 0; }
  .hero__sub,
  .prose p { overflow-wrap: anywhere; }
}

html,
body { overflow-x: clip; }

/* 第二轮：窄屏把这条链彻底压进容器（上面的 min-width:0 还不够，
   内部仍有 54px 自溢出，会把画框右侧裁掉） */
@media (max-width: 640px) {
  .plate,
  .plate__figure,
  .plate__side,
  .frame,
  .frame--small,
  .frame__mat,
  .frame__lip {
    width: 100%;
    max-width: 100%;
  }
  .frame__img { width: 100%; height: auto; display: block; }
  .artwork, .artwork__figure { width: 100%; max-width: 100%; }
  .plate__cap, .artwork__label, .artwork__note, .labelcard dd { overflow-wrap: anywhere; }
}

/* 第三轮：移动端「灯」按钮变成无字黑方块
   原因：未滚动时 --tool-inv 被定义成 var(--ink)（那是假设页眉浮在暗画上的）；
   但移动端页眉是纸底 + 墨字，于是「按下态：背景=currentColor(墨) + 字色=--tool-inv(墨)」
   就成了墨底墨字，肉眼看到一块没有字的黑方块。
   修法：窄屏页眉既然是纸底，按下态的反白字就必须是纸色。 */
@media (max-width: 900px) {
  .masthead,
  [data-scrolled="true"] .masthead { --tool-inv: var(--bg); }
}