/* The illustrated field guide to Laswynd's intelligent peoples. */
.world-panel.panten .region-art {
  background: url('panten-country-lizrakes.webp') center center / cover no-repeat;
}

.creatures-section {
  background: radial-gradient(ellipse at 78% 8%, rgba(75, 107, 98, .2), transparent 43%), #111d22;
  border-top: 1px solid rgba(199, 181, 133, .18);
  border-bottom: 1px solid rgba(199, 181, 133, .18);
}
.creatures-section .section-heading > p { max-width: 440px; }
.creatures-section .eyebrow { color: #bbd0b4; }
.creature-feature {
  display: grid;
  grid-template-columns: 58% 42%;
  width: 100%;
  min-height: 485px;
  padding: 0;
  overflow: hidden;
  text-align: left;
  color: #f2ecdd;
  background: #1b2429;
  border: 1px solid rgba(217, 191, 139, .58);
  box-shadow: 0 22px 80px rgba(0, 0, 0, .2);
  cursor: pointer;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.creature-feature:hover {
  transform: translateY(-5px);
  border-color: #f2d597;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .3);
}
.creature-feature-image {
  display: block;
  min-height: 485px;
  position: relative;
  background: linear-gradient(to right, transparent 72%, rgba(22, 31, 36, .25) 100%),
    url('lizrake-field-gallery.webp') center / cover no-repeat;
}
.creature-image-caption {
  position: absolute;
  display: block;
  bottom: 24px;
  left: 29px;
  padding: 9px 11px;
  border: 1px solid rgba(237, 214, 159, .55);
  background: rgba(13, 22, 26, .7);
  color: #f6dfae;
  letter-spacing: .16em;
  font: 700 8px var(--sans);
}
.creature-feature-copy {
  padding: 34px clamp(28px, 3.5vw, 54px) 32px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: linear-gradient(150deg, rgba(32, 49, 50, .88), rgba(20, 29, 36, .98));
}
.creature-index {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(213, 183, 121, .27);
  color: #c5b293;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2em;
}
.creature-index span { color: #93afa9; }
.creature-title {
  display: block;
  margin: 26px 0 5px;
  font: 500 clamp(54px, 5vw, 74px)/.9 var(--serif);
  letter-spacing: -.025em;
}
.creature-title em { color: #dfc18e; font-style: italic; font-weight: 400; }
.creature-intro {
  display: block;
  color: #d7bd91;
  font: italic 26px/1.25 var(--serif);
  margin: 9px 0 15px;
}
.creature-description {
  display: block;
  color: #bfc9c3;
  font-size: 12px;
  line-height: 1.8;
  max-width: 460px;
}
.creature-mini-stats { display: grid; gap: 12px; margin: 26px 0 27px; }
.creature-mini-stat { display: grid; gap: 6px; }
.creature-mini-stat > span:first-child {
  display: flex;
  justify-content: space-between;
  color: #ded7c8;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
}
.creature-mini-stat b { color: #dec790; font-weight: 500; }
.creature-mini-meter {
  display: block;
  height: 7px;
  background: linear-gradient(to right, #8eac9e var(--score), rgba(136, 157, 148, .15) var(--score));
  border: 1px solid rgba(176, 191, 169, .35);
  position: relative;
}
.creature-mini-meter:after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0, transparent calc(10% - 2px), rgba(14, 28, 33, .95) calc(10% - 2px), rgba(14, 28, 33, .95) 10%);
}
.creature-feature-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: auto;
  padding-top: 17px;
  border-top: 1px solid rgba(213, 183, 121, .28);
  color: #f2d597;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
}
.creature-feature-link span { font-size: 19px; font-weight: 400; }
.creatures-section .concept-note { margin-top: 24px; }
.character-dialog[data-character="lizrake"] { --dossier-accent: #b2cead; }
.character-dialog[data-character="lizrake"] .dossier-portrait {
  background: url('lizrake-field-full.webp') center center / cover no-repeat;
}
.character-dialog .dossier-pagination[hidden] { display: none !important; }

@media (max-width: 1000px) {
  .creature-feature { grid-template-columns: 52% 48%; }
  .creature-feature-copy { padding: 30px; }
  .creature-title { font-size: 57px; }
  .creature-description { font-size: 11px; }
}
@media (max-width: 780px) {
  .creature-feature { grid-template-columns: 1fr; }
  .creature-feature-image { min-height: 330px; background-position: center center; }
  .creature-feature-copy { padding: 32px; }
  .creature-title { font-size: 66px; }
  .creature-mini-stats { margin-top: 26px; }
}
@media (max-width: 500px) {
  .creature-feature-image { min-height: 275px; }
  .creature-feature-copy { padding: 25px 20px; }
  .creature-title { font-size: 57px; }
  .creature-intro { font-size: 23px; }
  .creature-description { font-size: 12px; }
  .creature-image-caption { left: 15px; bottom: 16px; font-size: 7px; }
  .creature-feature-link { font-size: 8px; letter-spacing: .09em; }
}
@media (prefers-reduced-motion: reduce) {
  .creature-feature { transition: none; }
}

/* Equal-size field-guide entries; the large portraits open in the shared dossier. */
.peoples-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 19px;
  align-items: stretch;
}
.peoples-gallery .creature-feature {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.peoples-gallery .creature-feature-image {
  flex: none;
  min-height: 0;
  width: 100%;
  aspect-ratio: 1.48;
  background-position: center center;
}
.peoples-gallery .creature-feature-image.torvaran-art {
  background-image: linear-gradient(to top, rgba(12, 23, 28, .42), transparent 45%), url('torvaran-people-gallery.webp');
}
.peoples-gallery .creature-feature-image.panten-art {
  background-image: linear-gradient(to top, rgba(12, 23, 28, .42), transparent 45%), url('panten-people-gallery.webp');
}
.peoples-gallery .creature-feature-image.forwyndian-art {
  background-image: linear-gradient(to top, rgba(12, 23, 28, .42), transparent 45%), url('forwyndian-people-gallery.webp');
}
.peoples-gallery .creature-image-caption {
  left: 15px;
  bottom: 15px;
  font-size: 7px;
  letter-spacing: .11em;
}
.peoples-gallery .creature-feature-copy {
  flex: 1;
  padding: 25px 23px 24px;
}
.peoples-gallery .creature-index { font-size: 8px; letter-spacing: .14em; }
.peoples-gallery .creature-title {
  font-size: clamp(37px, 3.3vw, 49px);
  margin: 23px 0 5px;
  line-height: 1;
}
.peoples-gallery .creature-intro { font-size: 20px; margin: 8px 0 12px; }
.peoples-gallery .creature-description { font-size: 11.5px; line-height: 1.7; }
.peoples-gallery .creature-mini-stats { margin: auto 0 20px; padding-top: 23px; gap: 11px; }
.peoples-gallery .creature-feature-link { font-size: 8.5px; letter-spacing: .09em; }
.character-dialog[data-character="torvaran"] { --dossier-accent: #d6b78a; }
.character-dialog[data-character="torvaran"] .dossier-portrait {
  background: url('torvaran-people-full.webp') center center / cover no-repeat;
}
.character-dialog[data-character="panten"] { --dossier-accent: #c5b48c; }
.character-dialog[data-character="panten"] .dossier-portrait {
  background: url('panten-people-full.webp') center center / cover no-repeat;
}
.character-dialog[data-character="forwyndian"] { --dossier-accent: #bfc4dc; }
.character-dialog[data-character="forwyndian"] .dossier-portrait {
  background: url('forwyndian-people-full.webp') center center / cover no-repeat;
}

@media (max-width: 1070px) {
  .peoples-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .peoples-gallery .creature-title { font-size: clamp(42px, 5vw, 55px); }
}
@media (max-width: 700px) {
  .peoples-gallery { grid-template-columns: 1fr; gap: 20px; }
  .peoples-gallery .creature-feature-image { aspect-ratio: 1.55; }
  .peoples-gallery .creature-feature-copy { padding: 28px 25px 26px; }
  .peoples-gallery .creature-title { font-size: clamp(44px, 10vw, 61px); }
  .peoples-gallery .creature-intro { font-size: 23px; }
  .peoples-gallery .creature-description { font-size: 12px; }
}