/* The page header is the shared `page_masthead()` macro (pm-* classes, styled by
   page_masthead.css in the global site bundle). Do NOT reintroduce a `.chd h1`
   rule — it out-specifies `.pm-title` and would clobber the shared display
   type + gradient fill. */
.chd { max-width: 1180px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
.chd-search { display: flex; align-items: center; gap: .6rem; max-width: 32rem; margin: 1.5rem 0 2rem; padding: .7rem .9rem; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); border-radius: 999px; background: var(--surface, rgba(255,255,255,.7)); }
.chd-search:focus-within { outline: 3px solid var(--brand, #b54833); outline-offset: 3px; }
.chd-search input { width: 100%; border: 0; outline: 0; color: inherit; background: transparent; }
.chd-section { margin-top: 2.2rem; }
.chd-section-head { display: flex; align-items: baseline; gap: .75rem; margin-bottom: 1rem; }
.chd-section-head h2 { margin: 0; font-size: 1.25rem; }
.chd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.chd-card { min-width: 0; }
.chd-card-link { --cc-fan-card-accent: var(--brand, #b54833); display: grid; grid-template-rows: 132px auto; height: 100%; overflow: hidden; border: 1px solid color-mix(in srgb, currentColor 14%, transparent); border-radius: 1rem; color: inherit; background: var(--surface, #fff); text-decoration: none; box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.chd-card-link:focus-visible { outline: 3px solid var(--brand, #b54833); outline-offset: 3px; }
.chd-card-covers { display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 1rem; background: linear-gradient(135deg, rgba(181,72,51,.18), rgba(41,72,94,.18)); }
.chd-card-covers img { width: 72px; height: 104px; margin-inline: -14px; border-radius: .25rem; object-fit: cover; box-shadow: 0 5px 16px rgba(0,0,0,.28); transform: rotate(-3deg); }
.chd-card-covers img:nth-child(even) { transform: translateY(-3px) rotate(3deg); }
.chd-card-body { display: grid; gap: .4rem; padding: 1rem; }
.chd-card-body h3 { margin: 0; font-size: 1.1rem; }
.chd-card-body p { margin: 0; color: var(--text-muted, #6d6961); font-size: .84rem; }
.chd-empty { padding: 1rem; border: 1px dashed color-mix(in srgb, currentColor 24%, transparent); border-radius: .75rem; color: var(--text-muted, #6d6961); }
.chd-search-go { flex: 0 0 auto; }
.chd-count { margin: 0 0 1rem; color: var(--text-muted, #6d6961); font-size: .85rem; }
.chd-card-chronology { color: var(--brand, #b54833); font-weight: 600; }
.chd-more { display: flex; align-items: center; gap: .75rem; margin-top: 2rem; }
.chd-more-link { text-decoration: none; }
.chd-failed { color: var(--text-muted, #6d6961); font-size: .85rem; }
@media (max-width: 520px) { .chd-grid { grid-template-columns: 1fr 1fr; gap: .65rem; } .chd-card-link { grid-template-rows: 110px auto; } .chd-card-covers img { width: 58px; height: 86px; } }
@media (max-width: 360px) { .chd-grid { grid-template-columns: 1fr; } }

/* --- List view -------------------------------------------------------------
   The same card markup, re-laid-out as a row. Both grid containers (the Jinja
   one and the Alpine x-for one) take this modifier, which is why there is no
   second card template to keep in step.

   This block sits AFTER the width queries deliberately. `.chd-grid--list` and
   the `.chd-grid` rules inside those queries have equal specificity, so source
   order is the only thing that stops the 520px two-column rule from clobbering
   the single column here. Keep any new list rule below them. */
.chd-view-tabs { margin-left: auto; }
.chd-grid--list { grid-template-columns: 1fr; gap: .5rem; }
.chd-grid--list .chd-card-link { grid-template-rows: none; grid-template-columns: auto 1fr; align-items: center; border-radius: .75rem; box-shadow: 0 4px 14px rgba(0,0,0,.05); }
.chd-grid--list .chd-card-covers { padding: .55rem .2rem .55rem .75rem; background: none; }
/* A fan of spines needs width the row does not have; the first cover alone
   still carries the visual recognition the name is looked up by. */
.chd-grid--list .chd-card-covers img { width: 40px; height: 58px; margin-inline: 0; box-shadow: 0 3px 9px rgba(0,0,0,.22); transform: none; }
.chd-grid--list .chd-card-covers img:nth-child(n + 2) { display: none; }
.chd-grid--list .chd-card-body { gap: .1rem; padding: .6rem .9rem; }
.chd-grid--list .chd-card-body h3 { font-size: 1rem; }
.chd-grid--list .chd-card-body p { font-size: .8rem; }