/* Keep the brand and destinations centred as a group, with room to scroll
   when a growing directory is taller than the viewport. */
.compendium-directory {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  padding-block: 56px;
}
.directory-brand {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0;
}
.directory-brand .brand-mark { width: 80px; height: 66px; object-fit: contain; }
.directory-brand .goblinist-wordmark {
  color: var(--header, #171717);
  font-family: var(--brand-font);
  font-size: clamp(34px,4.4vw,52px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.8px;
  text-transform: uppercase;
}
.directory-brand .custom-logo { max-width: min(var(--logo-width),100%); max-height: var(--logo-height); }
.compendium-grid {
  display: grid;
  flex: none;
  width: 100%;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 24px;
  align-items: stretch;
}
.compendium-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: max(var(--radius),12px);
  box-shadow: 0 8px 26px #0000000d;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.compendium-card:hover { border-color: var(--link); box-shadow: 0 12px 30px #0000001a; }
.compendium-card-link {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  min-width: 0;
  min-height: 290px;
  aspect-ratio: 8 / 5;
  color: #fff;
  text-decoration: none;
}
.compendium-card-link:focus-visible { outline: 3px solid var(--link); outline-offset: -5px; border-radius: inherit; }
.compendium-card-art { position: absolute; inset: 0; overflow: hidden; background: #25292c; }
.compendium-card-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,#00000005 10%,#00000024 32%,#000000dc 100%); }
.compendium-card-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.compendium-card-art--placeholder { display: flex; align-items: center; justify-content: center; background: var(--raised); }
.compendium-card-art--placeholder img { width: 48%; height: 68%; object-fit: contain; align-self: flex-start; margin-top: 10px; }
.compendium-card-copy { position: relative; isolation: isolate; padding: 28px; }
/* The scrim follows the copy height, so longer CMS titles retain contrast. */
.compendium-card-copy::before { content: ""; position: absolute; z-index: -1; inset: -48px 0 0; background: linear-gradient(180deg,#17171700,#171717a6 48px); pointer-events: none; }
.compendium-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.compendium-card-heading h2 { margin: 0; color: inherit; font-size: calc(25px * var(--heading-scale)); font-weight: 700; line-height: 1.25; letter-spacing: -.4px; overflow-wrap: anywhere; }
.compendium-card-heading > span { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border: 1px solid #ffffff66; border-radius: 50%; color: #fff; font-size: 21px; line-height: 1; }
.compendium-card-copy p { margin: 10px 0 0; max-width: 44ch; color: #ffffffeb; font-size: calc(14px * var(--text-scale)); line-height: 1.6; overflow-wrap: anywhere; }
.compendium-card-credit { position: absolute; inset: 12px 12px auto auto; margin: 0; }
.compendium-card-credit .image-credit { margin: 0; }
.compendium-card-credit .media-information summary { min-height: 44px; padding: 8px 12px; margin: 0; color: #fff; background: #171717b8; border: 1px solid #ffffff40; border-radius: 6px; }
.compendium-card-credit .media-information summary:hover { background: #171717; }
/* Native disclosures remain readable without the enhanced media dialog. */
.compendium-card-credit:has(.media-information[open]) { position: relative; inset: auto; padding: 12px; }
@media (max-width: 960px) { .compendium-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; } }
@media (min-width: 601px) {
  .compendium-grid--single { grid-template-columns: minmax(0,520px); justify-content: center; }
  .compendium-grid--pair { grid-template-columns: repeat(2,minmax(0,440px)); justify-content: center; }
}
@media (max-width: 600px) {
  .compendium-directory { padding-block: 36px; gap: 32px; }
  .directory-brand { gap: 10px; }
  .directory-brand .brand-mark { width: 60px; height: 52px; }
  .directory-brand .goblinist-wordmark { font-size: clamp(27px,8vw,38px); letter-spacing: -.5px; }
  .compendium-grid { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .compendium-card-link { min-height: 280px; }
  .compendium-card-copy { padding: 22px; }
  .compendium-card-heading { gap: 12px; }
  .compendium-card-heading h2 { font-size: calc(22px * var(--heading-scale)); }
}
@media (prefers-reduced-motion: reduce) { .compendium-card { transition: none; } }