becomes one grid cell so its heading stays paired
with its table. Auto-fits 1-3 columns by viewport width; collapses to one
column on phones. */
.tablegrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 0.5rem 1.25rem;
margin: 1rem 0;
align-items: start;
}
.tablegrid > div {
break-inside: avoid;
min-width: 0;
}
.tablegrid h3 {
margin-top: 0.5rem;
}
.tablegrid table {
width: 100%;
font-size: 0.85em;
margin: 0;
}
.tablegrid th,
.tablegrid td {
padding: 0.3em 0.5em;
}
/* Shrink the narrow numeric columns (Roll, # App) to content width; let the
Creature column flex. Works for the standard 3-column shape used on Sky and
other specials pages. */
.tablegrid th:nth-child(2),
.tablegrid td:nth-child(2),
.tablegrid th:nth-child(3),
.tablegrid td:nth-child(3) {
width: 1%;
white-space: nowrap;
text-align: center;
}
/* ============================================================================
PHB-inspired look experiment (2026-07-23)
Palette + heading font swap to evoke the 5e reference-book feel.
Rust name color and burnt-orange callout border cribbed from 5etools.
To revert: delete everything below this comment block.
============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Convergence&family=Cinzel:wght@500;600;700&display=swap');
/* Light mode palette overrides */
[data-md-color-scheme="default"] {
--md-accent-fg-color: #822000; /* rust — PHB entry-name red */
--md-typeset-a-color: #822000; /* body links match accent */
--md-default-bg-color: #fbf9f4; /* warm white nudge, not parchment */
--c5e-heading-color: #822000;
--c5e-rule-color: #e69a28; /* burnt orange, PHB stat block border */
}
/* Dark mode palette overrides (lifted rust so it reads on dark bg) */
[data-md-color-scheme="slate"] {
--md-accent-fg-color: #d29a38;
--md-typeset-a-color: #d29a38;
--c5e-heading-color: #d29a38;
--c5e-rule-color: #e69a28;
}
/* Convergence for all headings; body keeps Inter */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
font-family: 'Convergence', 'Inter', system-ui, sans-serif;
color: var(--c5e-heading-color);
letter-spacing: 0.01em;
font-weight: 500;
}
/* h1 gets a small-caps chapter-head treatment with a rule underline */
.md-typeset h1 {
font-variant-caps: small-caps;
border-bottom: 1px solid var(--c5e-rule-color);
padding-bottom: 0.2em;
}
/* Cancel the fake-bold that ## **Wrapped Titles** inflict on Convergence
(Convergence ships in a single weight; browsers synthesize an ugly bold). */
.md-typeset h1 strong,
.md-typeset h2 strong,
.md-typeset h3 strong,
.md-typeset h4 strong,
.md-typeset h5 strong,
.md-typeset h6 strong {
font-weight: inherit;
}
/* h2 gets a subtle rule underline too — PHB section-head feel */
.md-typeset h2 {
border-bottom: 1px solid rgba(230, 154, 40, 0.35);
padding-bottom: 0.15em;
}
/* Opt-in stat block class:
### Sergeant
...
Burnt-orange top and bottom rules; heading picks up the rust color. */
.md-typeset .statblock {
border-top: 2px solid var(--c5e-rule-color);
border-bottom: 2px solid var(--c5e-rule-color);
padding: 0.6em 1em;
margin: 1.2em 0;
background: rgba(230, 154, 40, 0.05);
}
.md-typeset .statblock h2,
.md-typeset .statblock h3,
.md-typeset .statblock h4 {
border: 0;
margin-top: 0;
}
/* Dial 1: let content fill the full viewport width. Removes the ~61rem cap
that leaves big empty margins on wide screens. */
.md-grid {
max-width: none;
}
/* Dials 2 and 3: shrink body text and tighten line-height for 5etools-style
density. mkdocs-material sets html to 125% (1rem = 20px), so .8rem = 16px
is the default. .65rem lands around 13px, matching 5etools body text.
Mobile bumps back up in the media query below. */
.md-typeset {
font-size: 0.65rem; /* ~13px, was ~16px */
line-height: 1.45; /* was 1.6 */
}
/* Compact tables for scannability. Applies to standard markdown tables
(Quests d8, encounter tables, blueprint composition tables). Reduces
the default mkdocs-material cell padding and tightens row height.
Does not affect .tablegrid, which sets its own padding. */
.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
padding: 0.25em 0.4em;
line-height: 1.3;
}
/* Table decoration (2026-08-04). Burnt-orange semi-transparent header, subtle
alternating row highlight, and thin vertical column borders. Uses the
existing --c5e-rule-color (burnt orange, #e69a28) palette variable via
rgba literals so tint is applied over the current page background. */
.md-typeset table:not([class]) th {
background-color: rgba(230, 154, 40, 0.28);
border-left: 1px solid rgba(230, 154, 40, 0.35);
border-right: 1px solid rgba(230, 154, 40, 0.35);
}
.md-typeset table:not([class]) td {
border-left: 1px solid rgba(230, 154, 40, 0.15);
border-right: 1px solid rgba(230, 154, 40, 0.15);
}
.md-typeset table:not([class]) tbody tr:nth-child(even) {
background-color: rgba(230, 154, 40, 0.06);
}
/* Narrow first column (d6, d8, roll number) hugs its content instead of
auto-sizing wide. Closes the gap between the roll cell and the entry
cell in Quests tables and encounter tables. */
.md-typeset table:not([class]) th:first-child,
.md-typeset table:not([class]) td:first-child {
width: 1%;
white-space: nowrap;
}
/* Mobile safety: restore readable text size below the tablet breakpoint so
phone users don't get squint text. */
@media screen and (max-width: 768px) {
.md-typeset {
font-size: 0.8rem;
line-height: 1.6;
}
}
/* PHB-style sidebar callout used for "At a glance" invocation-chain blocks.
Usage in markdown:
!!! at-a-glance "At a glance"
**Used by:** ...
**Uses:** ...
Renders as a burnt-orange rule top and bottom, warm tint, small-caps title. */
.md-typeset .admonition.at-a-glance,
.md-typeset details.at-a-glance {
border: none;
border-top: 2px solid var(--c5e-rule-color);
border-bottom: 2px solid var(--c5e-rule-color);
border-radius: 0;
background: rgba(230, 154, 40, 0.08);
box-shadow: none;
padding: 0.4em 1em 0.6em;
margin: 1.2em 0;
}
.md-typeset .admonition.at-a-glance > .admonition-title,
.md-typeset details.at-a-glance > summary {
background: transparent;
color: var(--c5e-heading-color);
font-family: 'Convergence', 'Inter', sans-serif;
font-variant-caps: small-caps;
letter-spacing: 0.02em;
font-weight: 500;
padding-left: 0;
border-bottom: 1px solid rgba(230, 154, 40, 0.35);
margin-bottom: 0.3em;
}
.md-typeset .admonition.at-a-glance > .admonition-title::before,
.md-typeset details.at-a-glance > summary::before {
display: none; /* hide the default admonition icon */
}
/* Header: rust background, Cinzel title. Direct selector to beat the palette
attribute-selector specificity. */
.md-header,
.md-header--shadow {
background-color: #822000;
}
.md-header__topic > .md-ellipsis,
.md-header__title .md-ellipsis {
font-family: 'Cinzel', 'Trajan Pro', Georgia, serif;
font-weight: 600;
letter-spacing: 0.12em;
font-size: 1rem;
}
/* Mobile drawer title bar: match the desktop header instead of the palette
primary (blue-grey), so the drawer opens with the same rust field and
Cinzel title as the top header. */
.md-nav--primary .md-nav__title[for="__drawer"] {
background-color: #822000;
font-family: 'Cinzel', 'Trajan Pro', Georgia, serif;
font-weight: 600;
letter-spacing: 0.12em;
}
/* Nav density — matches the content-column density we already set. Applies to
both the left (primary) and right (secondary / on-this-page) sidebars. */
.md-nav {
font-size: 0.65rem;
line-height: 1.35;
}
.md-nav__title {
padding-top: 0.6em;
padding-bottom: 0.4em;
font-size: 0.7rem;
}
.md-nav__item {
padding: 0;
}
.md-nav__link {
margin-top: 0.15em;
padding: 0.1em 0;
line-height: 1.35;
}
/* Tighter sidebar padding — pulls nav flush to viewport edges and closer to
the content column. Combined with the nav font shrink above, this recovers
a lot of horizontal space. */
.md-sidebar {
padding: 0.5rem 0;
}
.md-sidebar__scrollwrap {
margin: 0;
}
.md-nav__title {
padding: 0.4rem 0.5rem;
}
.md-nav__list {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
/* Restore comfortable sidebar padding on mobile so tap targets stay usable. */
@media screen and (max-width: 768px) {
.md-nav__title {
padding: 0.8rem 1rem;
}
.md-nav__list {
padding-left: 1rem;
padding-right: 1rem;
}
}
/* Mobile safety: restore readable nav sizes on phones. */
@media screen and (max-width: 768px) {
.md-nav {
font-size: 0.85rem;
line-height: 1.5;
}
.md-nav__title {
font-size: 0.9rem;
}
.md-nav__link {
padding: 0.4em 0;
line-height: 1.5;
}
}