/* Atmospheric genre; existing dark Diablo tone and ember anchor are preserved.
   Structure: class portrait beside intro, icon facets above credited catalog.
   Scoped art layer: typography and colors inherit the shared page shell.
   Hallmark critique (1–5): game identity 5, hierarchy 4, readability 4,
   restraint 4, responsive intent 4. Verify actual viewport behavior before release. */
.dm-art-page {
  --art-shade: var(--bg);
  --art-outline: var(--border);
  --art-copy: var(--ink);
  --art-muted: #c7b8a6;
  background: linear-gradient(180deg, transparent, var(--art-shade) 1050px),
    url('/art/diablo/sanctuary-background-display.webp') center 80px / 1600px auto no-repeat,
    var(--art-shade);
  overflow-x: clip;
}
.dm-art-page main { padding-top: 18px; }
.dm-hero {
  position: relative;
  isolation: isolate;
  min-height: 320px;
  display: flex;
  align-items: center;
  margin: 0 0 18px;
  border-bottom: 1px solid var(--art-outline);
}
.dm-hero-portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  z-index: -2;
}
.dm-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--art-shade) 4%, rgba(11,9,8,.88) 36%, transparent 73%),
    linear-gradient(0deg, var(--art-shade), transparent 25%);
  z-index: -1;
}
.dm-hero-copy { width: 62%; padding: 12px 0 24px; }
.dm-game-logo { display: block; width: 108px; height: auto; margin: 0 0 8px; }
.dm-hero h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.25; margin: 0 0 12px; text-wrap: balance; }
.dm-hero p { color: var(--art-muted); font-size: .94rem; line-height: 1.65; margin: 0 0 18px; max-width: 60ch; }
.dm-hero .btn { white-space: nowrap; }
.dm-art-page .dm-well-top { margin: 0 auto 18px; }
.dm-class-icon { flex: none; object-fit: contain; vertical-align: middle; }
.dm-art-page .lf-facets a { padding: 5px 11px; min-height: 38px; white-space: nowrap; }
.dm-art-page .lf-facets button { white-space: nowrap; }
.dm-art-page .lf-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.dm-art-page .lf-card { background: rgba(28,22,19,.94); display: flex; flex-direction: column; }
.dm-art-page .lf-card .meta { align-items: center; align-content: start; }
.dm-art-page .lf-card .foot { flex-wrap: wrap; margin-top: auto; }
.dm-art-page .lf-card .copies { white-space: nowrap; }
.dm-art-page .lf-card h3, .dm-art-page .lf-card .desc { overflow-wrap: anywhere; }
.dm-art-page .home-sec { gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
@media (max-width: 720px) {
  .dm-art-page .brand { font-size: 1.2rem; }
  .dm-art-page .site-inner { gap: 10px; }
  .dm-art-page main { padding-top: 8px; }
  .dm-hero { min-height: 0; display: block; padding-top: 148px; }
  .dm-hero-portrait { height: 230px; object-position: 78% center; }
  .dm-hero::after { background: linear-gradient(0deg, var(--art-shade) 35%, transparent 95%); }
  .dm-hero-copy { width: 100%; padding: 0 0 22px; }
  .dm-game-logo { width: 88px; margin-bottom: 10px; }
  .dm-hero h1 { font-size: 1.55rem; }
  .dm-hero p { font-size: .9rem; }
  .dm-art-page .home-guides { grid-template-columns: minmax(0, 1fr); }
  .dm-art-page .lf-facets { gap: 6px; }
  .dm-art-page .lf-facets a { padding: 4px 9px; }
}