/* Portrait framing and responsive image layout. */
.novel-char[src*="pyro-2014"] { object-fit: cover; object-position: 54% bottom; }
.novel-box, .novel-toolbar { min-width: 0; }
.novel-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; }
.novel-top > span:first-child { min-width: 0; overflow-wrap: anywhere; line-height: 1.8; }
.novel-top > span:last-child { white-space: nowrap; }
.album-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.album-item { min-width: 0; }
.album-item h3 { overflow-wrap: anywhere; }
@media (min-width: 641px) and (max-width: 900px) {
  .novel { min-height: 760px; }
  .novel-char { left: 74%; width: 62%; height: 72%; }
  .novel-box { width: 51%; }
  .novel-box h2 { font-size: 18px; }
  .novel-box p { font-size: 13px; }
  .novel-toolbar { gap: 4px; }
  .novel-toolbar .pixel-ghost { padding: 0 6px; font-size: 10px; }
  .novel-toolbar .novel-advance { gap: 8px; }
  .album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .novel-char[src*="pyro-2014"] { object-position: 54% top; }
  .album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}