/* ============================================================
   名画馆藏专属：装裱
   —— 每件作品都真的"挂"在墙上：纸白衬底 + 3px 墨框 + 硬投影
   —— 画作用 contain 完整呈现，绝不裁切（裁画是最外行的做法）
   —— 展签在下方：作品名 + 原作，编号已删（只有 hover 才看见的内容）
   孟菲斯化：深色渐变衬底与内圈金描边是"相框店"语言；
   纸白 + 墨框 + 硬投影才是这一个体系的"展墙"。
   ============================================================ */
.room{ padding:clamp(48px,7vw,86px) 0; }
.room-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap;
  margin-bottom:clamp(30px,3.8vw,52px); padding-bottom:1.3rem; border-bottom:2px solid var(--ink);
}
.room-head p{ margin:.6em 0 0; color:var(--text-2); max-width:34em; font-size:var(--fs-sm); }
.room-n{
  font-family:var(--mono); font-size:var(--fs-xs); font-weight:700; color:var(--ink);
  border:2px solid var(--ink); border-radius:var(--r-pill); padding:.42em .9em; white-space:nowrap;
  background:var(--cream); box-shadow:var(--sd-1);
}

.pgrid{ display:grid; gap:clamp(16px,2vw,26px); grid-template-columns:repeat(auto-fill,minmax(208px,1fr)); align-items:start; }
/* .tile 的整卡投影会落在展签上，overflow:hidden 还会裁掉画框自己的投影；
   这里只保留 .pframe 的投影 */
.pcard{ margin:0; border:0; background:none; padding:0; box-shadow:none; overflow:visible; }
.pcard:hover{ box-shadow:none; }
.pcard-hit{ display:block; width:100%; padding:0; border:0; background:none; text-align:left; color:inherit; font:inherit; cursor:zoom-in; }
/* 画框：纸白衬底 + 3px 墨框 + sd-3 硬投影。hover 只加深投影（ADR-27）*/
.pframe{
  position:relative; display:block; padding:8px;
  background:var(--paper);
  border:var(--bw) solid var(--ink);
  border-radius:var(--r-sm);
  box-shadow:var(--sd-3);
  transition:box-shadow var(--dur-ui) var(--ease-soft);
}
.pframe img{
  width:100%; height:auto; object-fit:contain;
  /* 图未解码前的底衬用纸白，和画框同色（原先是暗色站的 #0A0908，
     在亮底上就是一块黑洞；透明 PNG 的边角也会漏出来）。 */
  background:var(--paper); border-radius:var(--r-xs);
}
.pcard:hover .pframe{ box-shadow:var(--sd-4); }

/* .pnum 已删：只有 hover 才看见的编号（铁律：不许有只有 hover 才看到的内容）。
   展签信息（作品名 + 原作）本来就在 caption 里常驻。 */
figcaption{ padding:.8rem .25rem 0; }
/* 单行不折：网络采集那批名字最长到十四字（「电视机里竟然出现了奶蛙的影子」），
   折成两行会把这一格撑高，grid 一排的高度被最高的那张带上去，整排错位。
   省略号是兜底 —— 名字在 scripts/name_*_assets.py 里已压到十二字内。 */
figcaption b{
  display:block; font-size:var(--fs-md); letter-spacing:0; line-height:1.45;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.porig{
  display:block; margin-top:.28em; font-family:var(--mono); font-size:var(--fs-xs); color:var(--text-2);
}
/* 页头右侧的操作提示（原先是行内 font-size + letter-spacing + color） */
/* 页尾的版权说明块：和页脚之间留一段 */
.nb-tail{ margin-bottom:clamp(60px,9vw,110px); }

/* 灯箱样式在共享层（_base.css「共享组件 · 灯箱」）—— 这一页与表情画廊
   原先各写一份，图宽 780 vs 620、提示类名 .lb-nav vs .lb-tip，已经漂了。 */

/* 窄屏两列时卡片只剩 ~170px，展签一行只装得下九个多字：十个字以上的名字
   （「奶破蛙翻越阿尔卑斯山」「奶蛙的赞歌就是勇气的赞歌」）会被省略号吞掉，
   而展签是全站唯一能认人的信息。窄屏放开到两行、最多两行。
   宽屏仍单行 —— 一行高矮一致，网格才对得齐（1440 实测 586 张无一被截）。 */
@media (max-width:980px){
  /* 176px 让 980/981 都稳定在 4 列；140px 会在 980 突然变 6 列，
     981 又回到 4 列，卡片宽度从 140 跳到 213。 */
  .pgrid{ grid-template-columns:repeat(auto-fill,minmax(176px,1fr)); gap:12px; }
  figcaption b{
    white-space:normal;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  }
}
/* 320px 下 2×176 + gap 放不下，会退回单列；手机统一两列。 */
@media (max-width:560px){
  .pgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}