/* main is left at the stylesheet's body > * rule (70ch, centred, 16px inline
   padding) so the text edge lines up with the nav above it; overriding the
   width pushed the content left of the nav. */
.bestiary-summary { color: var(--muted, #666); margin: 0 0 1.5rem; }
.intro-cards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem; margin: 1.5rem 0 2rem;
}
.intro-cards figure { margin: 0; }
.intro-cards img {
    display: block; width: 100%; height: auto;
    border: 1px solid var(--border, #ddd);
}
.intro-cards figcaption { margin-top: 0.4em; font-size: 0.9em; }
.bestiary-table { width: 100%; border-collapse: collapse; }
.bestiary-table th, .bestiary-table td {
    text-align: left; vertical-align: top; padding: 0.4em 0.6em;
    border-bottom: 1px solid var(--border, #ddd); font-size: 0.9em;
}
.bestiary-table th { white-space: nowrap; }
.bestiary-table th[data-dir="asc"]::after { content: " \25B2"; font-size: 0.7em; }
.bestiary-table th[data-dir="desc"]::after { content: " \25BC"; font-size: 0.7em; }
.bestiary-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.bestiary-table td.date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bestiary-table td.kev { white-space: nowrap; }
.bestiary-table .card-thumb { display: block; width: 100px; height: auto; }
.bestiary-table .card-thumb img { display: block; width: 100%; height: auto; border: 1px solid var(--border, #ddd); }
.bestiary-table .card-name { font-weight: 600; }
.bestiary-table .card-class { font-variant: small-caps; color: var(--muted, #666); }
.bestiary-id {
    font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
    font-size: 0.75em; color: var(--muted, #666); text-decoration: none;
}
.bestiary-id:hover { color: var(--accent); text-decoration: underline; }
.bestiary-table .kev { color: #a3322f; font-weight: 600; }
.provisional { font-size: 0.85em; color: var(--muted, #666); }
.sort-btn {
    background: none; border: 0; padding: 0; margin: 0; font: inherit;
    color: inherit; cursor: pointer; text-decoration: underline dotted;
}
.sort-btn:focus-visible { outline: 2px solid var(--accent, #0a5); outline-offset: 2px; }
.card-page h1 { margin: 0 0 0.35rem; }
.card-page figure { margin: 0 0 1rem; }
/* The card fills the text column: its own margins then line up with the page
   margins instead of floating in a 420px box with dead space to the right. */
.card-page figure img {
    display: block; width: 100%; max-width: 100%; height: auto;
    border: 1px solid var(--border, #ddd);
}
/* The caption is boxed to the card's width so the name centres under the card
   itself rather than under the full column. */
.card-page figcaption {
    max-width: 100%; text-align: center;
    font-size: 0.95em; color: var(--muted, #666); margin-top: 0.4em;
}
.card-page dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.25em 1em; font-size: 0.9em; }
.card-page dt { color: var(--muted, #666); }
.card-page dd { margin: 0; }
/* The layperson description from the card, as text: the same words the tweet
   carries and the face prints, so the page and the post agree and a reader who
   cannot see the image still gets the description. */
.card-page .description { margin: 0 0 1.25rem; }
.more-info { margin-top: 1.25rem; }
.more-info a { word-break: break-all; }
@media (max-width: 40em) {
    .bestiary-table .card-thumb { width: 64px; }
    .bestiary-table th, .bestiary-table td { padding: 0.3em 0.35em; font-size: 0.85em; }
}