/*
  The pieces of a guide page like Getting Started (generate/gettingStarted.js): numbered step
  headings ("## Who you are {.plains-stage}"), the character sheet with markers matching those
  numbers, grids of cards for the choices a step makes, the download button, callouts with
  their own title (layouts/_markup/render-blockquote.html), the Names page's race tables and
  name roller, the Levels page's ladder and planner, the Races page and race pages, and the Home
  Province page and province pages. Plain CSS, outside the theme's Sass.
*/

:root {
  /* The candlelight of the opening view (plains-scene.css) */
  --plains-gold: #d9b86a;
  --plains-gold-bright: #ecd08a;
  --plains-gold-dim: #8f7337;
  --plains-parchment: #f3e7cf;
  --plains-ink: #1a1d21;
}

/* The medallion a step's number wears, on its heading and in the sheet's legend. */
.markdown h2.plains-stage::before,
.plains-sheet-legend li::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f3dc9a, var(--plains-gold) 55%, #7a5f2a);
  color: var(--plains-ink);
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 0 2px rgba(26, 29, 33, 0.9), 0 0 14px rgba(255, 154, 60, 0.35);
}

/* Step headings: the theme's gold bar above every h2 becomes the step's number beside it, the
   same medallion the sheet's markers wear. */
.markdown {
  counter-reset: plains-stage;
}

.markdown h2.plains-stage {
  counter-increment: plains-stage;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.markdown h2.plains-stage::before {
  content: counter(plains-stage);
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  font-size: 1.15rem;
}

/* The character sheet, front and back, lying on the table a little askew. */
.plains-sheet {
  margin: 2.5rem 0 1rem;
}

.plains-sheet-pages {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  padding: 0 0.75rem;
}

.plains-sheet-page {
  position: relative;
  transform: rotate(-1.2deg);
}

.plains-sheet-page + .plains-sheet-page {
  transform: rotate(1deg) translateY(0.75rem);
}

.plains-sheet-page img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  /* Paper in candlelight rather than a white screen. */
  filter: sepia(0.4) saturate(1.1) brightness(0.86) contrast(0.95);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
}

.plains-sheet-page svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.plains-sheet-marker circle {
  fill: var(--plains-gold);
  stroke: var(--plains-ink);
  stroke-width: 3;
  filter: drop-shadow(0 0 6px rgba(255, 154, 60, 0.55));
}

.plains-sheet-marker text {
  fill: var(--plains-ink);
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 800;
  text-anchor: middle;
}

.markdown .plains-sheet figcaption {
  margin-top: 2rem;
}

.markdown ol.plains-sheet-legend {
  counter-reset: plains-legend;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
}

.markdown ol.plains-sheet-legend li {
  counter-increment: plains-legend;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.markdown .plains-sheet-legend a {
  color: var(--plains-parchment);
}

.markdown .plains-sheet-legend a:hover {
  color: var(--plains-gold-bright);
}

.plains-sheet-legend li::before {
  content: counter(plains-legend);
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.85rem;
}

/* Cards for the choices a step makes: a race, a class, where to read next. */
.plains-picks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 0.75rem;
  margin: 1.25rem 0 1.75rem;
}

.plains-picks:has(.plains-pick-blurb) {
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.markdown a.plains-pick {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: color-mix(in srgb, var(--body-background) 82%, transparent);
  color: var(--body-font-color);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.markdown a.plains-pick:hover,
.markdown a.plains-pick:focus-visible {
  border-color: var(--plains-gold-dim);
  color: var(--body-font-color);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(217, 184, 106, 0.25);
}

.markdown .plains-pick-icon {
  align-self: center;
  width: 3rem;
  height: 3rem;
  margin: 0 0 0.15rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.plains-pick-name {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--plains-gold);
}

.plains-pick-blurb {
  flex: 1;
  font-size: 0.92rem;
  line-height: 1.45;
}

.plains-pick-meta {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--gray-500);
  font-variant-numeric: tabular-nums;
}

/* The button shortcode, as a call to action rather than the theme's small outline. */
.markdown a.book-btn[href] {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.5rem 0;
  padding: 0.65rem 1.3rem;
  border: none;
  border-radius: 6px;
  background: linear-gradient(180deg, #ecd08a, var(--plains-gold) 60%, #a8884a);
  color: var(--plains-ink);
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 18px rgba(255, 154, 60, 0.2);
  transition: filter 0.15s ease, transform 0.15s ease;
}

.markdown a.book-btn[href]::before {
  content: '';
  width: 1.1em;
  height: 1.1em;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12M7 10l5 5 5-5M5 21h14"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12M7 10l5 5 5-5M5 21h14"/></svg>') center / contain no-repeat;
}

.markdown a.book-btn[href]:hover,
.markdown a.book-btn[href]:focus-visible {
  color: var(--plains-ink);
  border: none;
  filter: brightness(1.1);
  transform: translateY(-1px);
}

/* Callouts with their own title ("> [!STORYTELLER] Ask your storyteller") say it in place of
   the type's label; the storyteller's are candlelight gold. */
.book-hint.titled::before {
  content: none;
}

.markdown .book-hint-title {
  margin: 0 0 0.35rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--plains-parchment);
}

.book-hint.storyteller {
  border-color: var(--plains-gold);
  background: linear-gradient(90deg, rgba(217, 184, 106, 0.14), color-mix(in srgb, var(--body-background) 90%, transparent) 60%);
}

.book-hint.storyteller .book-hint-title {
  color: var(--plains-gold-bright);
}

/* The Names page (generate/names.js): an in-world line to open on, each race's sound and example
   names, its d20 name table, and the button that rolls on it (static/js/name-roller.js). */
.markdown .plains-epigraph {
  margin: 0.5rem auto 2.25rem;
  max-width: 34rem;
  text-align: center;
}

.markdown .plains-epigraph blockquote {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}

.markdown .plains-epigraph p {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--plains-parchment);
}

.markdown .plains-epigraph p::before,
.markdown .plains-epigraph p::after {
  color: var(--plains-gold);
}

.markdown .plains-epigraph p::before {
  content: '\201C';
}

.markdown .plains-epigraph p::after {
  content: '\201D';
}

.markdown .plains-epigraph figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--plains-gold-dim);
}

.markdown .plains-name-sound {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 1rem 0 0.6rem;
  text-align: left;
}

.markdown .plains-name-sound span {
  flex: none;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--plains-gold-dim);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--plains-gold);
}

.markdown .plains-name-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 1rem;
}

.markdown .plains-name-examples span {
  padding: 0.15rem 0.7rem;
  border-radius: 4px;
  background: rgba(217, 184, 106, 0.1);
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--plains-parchment);
}

.plains-namer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin: 1.25rem 0 0.75rem;
}

.plains-namer[hidden] {
  display: none;
}

.markdown .plains-namer-roll {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1.1rem;
  border: none;
  border-radius: 6px;
  background: linear-gradient(180deg, #ecd08a, var(--plains-gold) 60%, #a8884a);
  color: var(--plains-ink);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 18px rgba(255, 154, 60, 0.2);
  transition: filter 0.15s ease, transform 0.15s ease;
}

/* A d20 on the button, which tumbles while the name does. */
.markdown .plains-namer-roll::before {
  content: '';
  width: 1.2em;
  height: 1.2em;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linejoin="round"><path d="M12 2l9 5v10l-9 5-9-5V7zM12 7l5 8H7zM12 2v5M3 7l4 8M21 7l-4 8M3 17l4-2M21 17l-4-2M7 15l5 7 5-7"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linejoin="round"><path d="M12 2l9 5v10l-9 5-9-5V7zM12 7l5 8H7zM12 2v5M3 7l4 8M21 7l-4 8M3 17l4-2M21 17l-4-2M7 15l5 7 5-7"/></svg>') center / contain no-repeat;
}

.markdown .plains-namer-roll:hover,
.markdown .plains-namer-roll:focus-visible {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.plains-namer.rolling .plains-namer-roll::before {
  animation: plains-tumble 0.4s linear infinite;
}

@keyframes plains-tumble {
  to {
    transform: rotate(360deg);
  }
}

.markdown .plains-namer-result {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 2.6rem;
}

.plains-namer-name {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--plains-gold-bright);
  text-shadow: 0 0 14px rgba(255, 154, 60, 0.3);
}

.plains-namer.rolling .plains-namer-name {
  color: var(--plains-gold-dim);
  text-shadow: none;
}

.plains-namer-dice {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--gray-500);
  font-variant-numeric: tabular-nums;
}

.markdown .plains-name-table {
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

.markdown .plains-name-table th,
.markdown .plains-name-table td {
  padding: 0.28rem 0.85rem;
  line-height: 1.35;
  text-align: left;
}

.markdown .plains-name-table thead tr + tr th {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-500);
}

.markdown .plains-name-table td:first-child,
.markdown .plains-name-table thead tr:first-child th:first-child {
  width: 3rem;
  text-align: center;
  color: var(--plains-gold-dim);
}

.markdown .plains-name-table .plains-name-stop {
  font-size: 0.85em;
  font-style: italic;
  color: var(--gray-500);
}

.markdown .plains-name-table td.plains-rolled {
  background: rgba(217, 184, 106, 0.18);
  box-shadow: inset 0 0 0 1px var(--plains-gold-dim);
  color: var(--plains-gold-bright);
  font-weight: 700;
}

/* The Levels page (generate/levels.js): the long experience table folded away, the words for
   each band of efficacy, the road from level 1 to Emperor, and the level planner
   (static/js/level-planner.js). */
.markdown details.plains-more {
  margin: 0.5rem 0 1.5rem;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 0.6rem 1rem;
}

.markdown details.plains-more summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--plains-gold);
}

.markdown .plains-efficacy-words {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.markdown .plains-efficacy-words span {
  padding: 0.15rem 0.6rem;
  border-radius: 4px;
  background: rgba(217, 184, 106, 0.1);
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--plains-parchment);
}

.markdown .plains-efficacy-words b {
  margin-right: 0.3rem;
  font-family: var(--body-font-family, inherit);
  font-style: normal;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--plains-gold);
}

.markdown ol.plains-ladder {
  position: relative;
  margin: 1.5rem 0 2rem;
  padding: 0;
  list-style: none;
}

/* The road itself, running down behind the level medallions */
.markdown ol.plains-ladder::before {
  content: '';
  position: absolute;
  top: 1.5rem;
  bottom: 1.5rem;
  left: 1.75rem;
  width: 2px;
  background: linear-gradient(var(--plains-gold), var(--plains-gold-dim) 45%, rgba(143, 115, 55, 0.25));
}

.markdown ol.plains-ladder > li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  margin: 0 0 1.1rem;
}

.plains-ladder-level {
  display: inline-flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f3dc9a, var(--plains-gold) 55%, #7a5f2a);
  color: var(--plains-ink);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px rgba(26, 29, 33, 0.9), 0 0 14px rgba(255, 154, 60, 0.35);
}

.plains-ladder-level small {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Heroic levels wear a darker, smoldering medallion */
.plains-ladder-heroic .plains-ladder-level {
  background: radial-gradient(circle at 35% 30%, #d98f5a, #8a3d1f 60%, #3d1a0d);
  color: var(--plains-parchment);
  box-shadow: 0 0 0 2px rgba(26, 29, 33, 0.9), 0 0 18px rgba(255, 110, 40, 0.45);
}

.markdown .plains-ladder-xp {
  margin: 0.2rem 0 0.25rem;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--plains-gold-dim);
}

.markdown ol.plains-ladder ul {
  margin: 0;
  padding-left: 1.1rem;
}

.markdown ol.plains-ladder ul li {
  margin: 0.1rem 0;
}

.plains-planner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
  margin: 1.25rem 0 2rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--plains-gold-dim);
  border-radius: 10px;
  background: color-mix(in srgb, var(--body-background) 82%, transparent);
}

.plains-planner[hidden] {
  display: none;
}

.markdown .plains-planner label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--plains-gold);
}

.markdown .plains-planner select,
.markdown .plains-planner input {
  min-width: 9rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  background: var(--body-background);
  color: var(--body-font-color);
  font: inherit;
  font-size: 0.95rem;
  letter-spacing: normal;
  text-transform: none;
}

.markdown .plains-planner input {
  min-width: 0;
  width: 6rem;
}

.markdown .plains-planner select:focus-visible,
.markdown .plains-planner input:focus-visible {
  outline: 2px solid var(--plains-gold);
  outline-offset: 1px;
}

.plains-planner-out {
  display: block;
  flex-basis: 100%;
}

.markdown .plains-planner-head {
  margin: 0.25rem 0 0.75rem;
  font-variant-numeric: tabular-nums;
}

.markdown .plains-planner-head strong {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--plains-parchment);
}

.markdown .plains-planner-head span {
  margin-left: 0.4rem;
  padding: 0.05rem 0.5rem;
  border: 1px solid #b0532a;
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e08a5a;
}

.plains-planner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.5rem 1.75rem;
}

.markdown .plains-planner-grid h4 {
  margin: 0.5rem 0 0.4rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--plains-gold);
}

.markdown .plains-planner-grid table {
  display: table;
  width: 100%;
  margin: 0 0 0.5rem;
  font-variant-numeric: tabular-nums;
}

.markdown .plains-planner-grid th,
.markdown .plains-planner-grid td {
  padding: 0.25rem 0.5rem;
}

.markdown .plains-planner-grid dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: baseline;
  gap: 0.2rem 1rem;
  margin: 0 0 0.5rem;
  font-variant-numeric: tabular-nums;
}

.markdown .plains-planner-grid dt {
  margin: 0;
  font-weight: 700;
}

.markdown .plains-planner-grid dd {
  margin: 0;
}

.markdown .plains-planner-grid p,
.markdown .plains-planner-grid ul {
  margin: 0 0 0.5rem;
  font-size: 0.92rem;
}

/* The Races page (generate/races.js): when each age of races was made, every race's scores side
   by side with its best in gold, and the rumors travelers carry. */
.markdown .plains-era-when {
  margin: -0.4rem 0 0.6rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--plains-gold-dim);
}

.markdown .plains-compare td,
.markdown .plains-compare th {
  padding: 0.45rem 0.55rem;
  font-size: 0.92rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.markdown .plains-compare td:first-child,
.markdown .plains-compare th:first-child {
  text-align: left;
}

.markdown .plains-compare strong {
  color: var(--plains-gold-bright);
}

.markdown dl.plains-rumors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.75rem;
  margin: 1.25rem 0;
}

.markdown dl.plains-rumors > div {
  padding: 0.8rem 1rem;
  border-left: 2px solid var(--plains-gold-dim);
  background: linear-gradient(90deg, rgba(217, 184, 106, 0.08), transparent 80%);
}

.markdown dl.plains-rumors dt {
  margin: 0 0 0.25rem;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--plains-gold);
}

.markdown dl.plains-rumors dd {
  margin: 0;
  font-style: italic;
  line-height: 1.5;
}

/* The race finder (static/js/race-finder.js): the planner's form, with the races ranked below it */
.markdown .plains-finder-out table {
  display: table;
  width: 100%;
  margin: 0.25rem 0 0;
  font-variant-numeric: tabular-nums;
}

.markdown .plains-finder-out th,
.markdown .plains-finder-out td {
  padding: 0.3rem 0.6rem;
  text-align: center;
}

.markdown .plains-finder-out th:first-child,
.markdown .plains-finder-out td:first-child {
  text-align: left;
}

.markdown .plains-finder-out .plains-finder-best td {
  color: var(--plains-gold-bright);
  font-weight: 700;
}

/* A race's page (generate/race.js): the race in a sentence or two, its starting scores in a row
   with the best lit, facts as label and value, and the provinces it would and wouldn't live in. */
.markdown .plains-lead {
  margin: 0 0 1.5rem;
  text-align: left;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--plains-parchment);
}

.plains-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 2rem;
}

.plains-stat {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 3.4rem;
  padding: 0.45rem 0.6rem 0.4rem;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: color-mix(in srgb, var(--body-background) 82%, transparent);
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--plains-parchment);
}

.plains-stat small {
  font-family: var(--body-font-family, inherit);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
}

.plains-stat-best {
  border-color: var(--plains-gold-dim);
  background: linear-gradient(180deg, rgba(217, 184, 106, 0.18), rgba(217, 184, 106, 0.05));
  color: var(--plains-gold-bright);
}

.plains-stat-best small {
  color: var(--plains-gold);
}

.plains-stats-gap {
  flex: 0 0 0.75rem;
}

/* The race's sigil (static/images/races) above its quote, glowing faintly like the candle */
.markdown .plains-race-sigil {
  display: block;
  width: 6rem;
  height: 6rem;
  margin: 0 auto 1rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 0 12px rgba(255, 154, 60, 0.25));
}

/* What other races say about this one: two quotes side by side, in the epigraph's italic */
.plains-voices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 1.75rem;
}

.markdown .plains-voices figure {
  margin: 0;
  padding: 0.9rem 1.1rem;
  border-left: 2px solid var(--plains-gold-dim);
  background: linear-gradient(90deg, rgba(217, 184, 106, 0.08), transparent 85%);
}

.markdown .plains-voices blockquote {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}

.markdown .plains-voices p {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--plains-parchment);
}

.markdown .plains-voices p::before {
  content: '\201C';
  color: var(--plains-gold);
}

.markdown .plains-voices p::after {
  content: '\201D';
  color: var(--plains-gold);
}

.markdown .plains-voices figcaption {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--plains-gold-dim);
}

.markdown dl.plains-facts,
.markdown dl.plains-places {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0;
  margin: 1rem 0 1.75rem;
  border-top: 1px solid var(--gray-200);
}

.markdown dl.plains-facts > div,
.markdown dl.plains-places > div {
  display: contents;
}

.markdown dl.plains-facts dt,
.markdown dl.plains-facts dd,
.markdown dl.plains-places dt,
.markdown dl.plains-places dd {
  margin: 0;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--gray-200);
}

.markdown dl.plains-facts dt,
.markdown dl.plains-places dt {
  padding-right: 1.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--plains-gold);
}

.markdown dl.plains-places dd {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.markdown dl.plains-places dd span,
.markdown dl.plains-places dd a {
  padding: 0.1rem 0.6rem;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  font-size: 0.9rem;
}

.markdown dl.plains-places dd a {
  flex: none;
  color: var(--body-font-color);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.markdown dl.plains-places dd a:hover,
.markdown dl.plains-places dd a:focus-visible {
  border-color: var(--plains-gold);
  color: var(--plains-gold-bright);
}

/* Warmer chips for the places a race calls home, faded ones for where it never goes */
.markdown dl.plains-places .plains-place-home dd span,
.markdown dl.plains-places .plains-place-home dd a {
  border-color: var(--plains-gold-dim);
  color: var(--plains-gold-bright);
}

.markdown dl.plains-places .plains-place-never dd span,
.markdown dl.plains-places .plains-place-never dd a {
  opacity: 0.55;
  text-decoration: line-through;
}

@media screen and (max-width: 40rem) {
  .markdown dl.plains-facts,
  .markdown dl.plains-places {
    grid-template-columns: 1fr;
  }

  .markdown dl.plains-facts dt,
  .markdown dl.plains-places dt {
    padding-bottom: 0;
    border-bottom: none;
  }
}

/* The Home Province page (generate/homeProvince.js) and province pages (generate/province.js):
   Sedia's map with a link over every province or one province lit, the peoples living in a
   province, the citizenship road, the military's titles side by side, the clans' stances, the
   province finder (static/js/province-finder.js) and the upbringing roller
   (static/js/upbringing-roller.js). */
.markdown .plains-map {
  margin: 1.25rem 0 1.75rem;
}

.markdown .plains-map svg {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--plains-gold-dim);
  border-radius: 10px;
  background: #1d4a63;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 22px rgba(255, 154, 60, 0.12);
}

.markdown .plains-map figcaption {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--gray-500);
}

.plains-map-province {
  fill: transparent;
  stroke: transparent;
  stroke-width: 0.3;
  cursor: pointer;
  transition: fill 0.2s ease;
}

.plains-map a:hover .plains-map-province,
.plains-map a:focus-visible .plains-map-province {
  fill: rgba(236, 208, 138, 0.32);
  stroke: var(--plains-gold-bright);
}

.plains-map a:focus-visible {
  outline: none;
}

.plains-map-label {
  font-family: var(--font-heading);
  font-size: 2.3px;
  font-weight: 700;
  fill: var(--plains-parchment);
  stroke: rgba(13, 16, 19, 0.85);
  stroke-width: 0.5px;
  paint-order: stroke;
  text-anchor: middle;
  pointer-events: none;
}

.plains-map-label-below {
  font-size: 1.8px;
  font-style: italic;
  fill: var(--plains-gold-bright);
}

.plains-map-below {
  fill: rgba(13, 16, 19, 0.55);
  stroke: var(--plains-gold-bright);
  stroke-width: 0.35;
  stroke-dasharray: 0.9 0.6;
  cursor: pointer;
  transition: fill 0.2s ease;
}

.plains-map a:hover .plains-map-below,
.plains-map a:focus-visible .plains-map-below {
  fill: rgba(236, 208, 138, 0.35);
}

.plains-map-dim {
  fill: rgba(13, 16, 19, 0.66);
}

.plains-map-outline {
  fill: none;
  stroke: var(--plains-gold-bright);
  stroke-width: 0.4;
  stroke-linecap: square;
}

.plains-map-town circle {
  fill: var(--plains-parchment);
  stroke: var(--plains-ink);
  stroke-width: 0.25;
}

.plains-map-town text {
  font-family: var(--font-heading);
  font-size: 1.45px;
  fill: var(--plains-parchment);
  stroke: rgba(13, 16, 19, 0.9);
  stroke-width: 0.4px;
  paint-order: stroke;
}

/* The peoples of a province's towns: a bar of their shares, and the key under it */
.plains-peoples {
  display: flex;
  gap: 2px;
  height: 0.9rem;
  margin: 0.75rem 0 0.6rem;
  border-radius: 999px;
  overflow: hidden;
}

.plains-peoples span {
  flex-basis: 0;
  min-width: 3px;
}

.plains-peoples-0 { background: var(--plains-gold-bright); }
.plains-peoples-1 { background: #c98a3c; }
.plains-peoples-2 { background: #8fae6a; }
.plains-peoples-3 { background: #6a9cae; }
.plains-peoples-4 { background: #a77fb8; }
.plains-peoples-5 { background: #6d717a; }

.markdown ul.plains-peoples-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  font-size: 0.92rem;
}

.markdown ul.plains-peoples-key li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

.markdown ul.plains-peoples-key i {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
}

.markdown ul.plains-peoples-key small {
  color: var(--gray-500);
  font-variant-numeric: tabular-nums;
}

.markdown details.plains-more h4 small {
  margin-left: 0.4rem;
  font-family: var(--body-font-family, inherit);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--plains-gold-dim);
}

/* A province's tables: the comparison table's tight rows, letting long names wrap */
.markdown .plains-wrap td,
.markdown .plains-wrap th {
  white-space: normal;
}

.markdown .plains-towns td:first-child {
  min-width: 8rem;
  font-weight: 700;
}

/* The citizenship road: a tighter ladder than the Levels page's, royalty in the darker medallion */
.markdown ol.plains-ladder-citizenship > li {
  align-items: center;
  margin-bottom: 0.7rem;
}

.markdown ol.plains-ladder-citizenship strong {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--plains-parchment);
}

.markdown ol.plains-ladder-citizenship .plains-ladder-xp {
  margin: 0.1rem 0 0;
}

/* The military: every province's titles for the eight ranks, as a chain beside its name */
.markdown dl.plains-military dt a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}

.markdown dl.plains-military dt img {
  width: 1.6rem;
  height: 1.6rem;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

.markdown dl.plains-military dd ol.plains-clan-ranks {
  margin: 0;
}

.markdown dl.plains-military ol.plains-clan-ranks li + li::before {
  content: none;
}

.markdown ol.plains-clan-ranks li small {
  margin-right: 0.3rem;
  font-family: var(--body-font-family, inherit);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--plains-gold-dim);
}

/* The clans: where each sits, its ranks lowest to highest, and the stances between them */
.markdown .plains-clan-seat {
  margin: -0.4rem 0 0.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--plains-gold-dim);
}

.markdown ol.plains-clan-ranks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.85rem;
  padding: 0;
  list-style: none;
}

.markdown ol.plains-clan-ranks li {
  margin: 0;
  padding: 0.1rem 0.6rem;
  border-radius: 4px;
  background: rgba(217, 184, 106, 0.1);
  font-family: var(--font-heading);
  font-size: 0.92rem;
  color: var(--plains-parchment);
}

.markdown ol.plains-clan-ranks li + li::before {
  content: '\203A';
  margin-right: 0.55rem;
  color: var(--plains-gold-dim);
}

.markdown .plains-clan-matrix th,
.markdown .plains-clan-matrix td {
  padding: 0.45rem 0.4rem;
  font-size: 0.85rem;
  text-align: center;
}

.markdown .plains-clan-matrix th[scope='col'] {
  line-height: 1.25;
}

.markdown .plains-clan-matrix th[scope='row'] {
  text-align: left;
  white-space: nowrap;
}

.markdown .plains-clan-matrix .plains-stance-ally {
  background: rgba(143, 174, 106, 0.18);
  color: #b9d48f;
  font-weight: 700;
}

.markdown .plains-clan-matrix .plains-stance-enemy {
  background: rgba(176, 83, 42, 0.18);
  color: #e08a5a;
  font-weight: 700;
}

.markdown .plains-clan-matrix .plains-stance-neutral {
  color: var(--gray-500);
}

.markdown .plains-clan-matrix .plains-stance-self {
  background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(217, 184, 106, 0.08) 6px 8px);
}

/* The province finder's table: the warmest provinces lit, the ones a race never lives in faded */
.markdown .plains-finder-out td {
  vertical-align: middle;
}

.markdown .plains-finder-out td a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.markdown .plains-finder-out td img {
  width: 1.75rem;
  height: 1.75rem;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

.markdown .plains-finder-out .plains-finder-home td {
  color: var(--plains-gold-bright);
  font-weight: 700;
}

.markdown .plains-finder-out .plains-finder-never td {
  opacity: 0.5;
}

.markdown .plains-finder-out small,
.markdown .plains-finder-out .plains-finder-none {
  color: var(--gray-500);
}

/* The upbringing roller: the name roller's button, with the station and the province's line under it */
.markdown .plains-upbringing-pick {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--plains-gold);
}

.markdown .plains-upbringing-pick select {
  min-width: 10rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  background: var(--body-background);
  color: var(--body-font-color);
  font: inherit;
  font-size: 0.95rem;
  letter-spacing: normal;
  text-transform: none;
}

.markdown .plains-upbringing {
  align-items: flex-end;
}

.markdown .plains-upbringing-out {
  flex-basis: 100%;
  min-height: 1rem;
}

.markdown .plains-upbringing-out p {
  margin: 0 0 0.4rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--plains-gold-dim);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--plains-gold-bright);
}

.plains-namer.rolling .plains-upbringing-out p {
  color: var(--plains-gold-dim);
}

.markdown .plains-roll-table td.plains-rolled {
  background: rgba(217, 184, 106, 0.18);
  box-shadow: inset 0 0 0 1px var(--plains-gold-dim);
  color: var(--plains-gold-bright);
}

/* The Rodes page (generate/rodes.js) and rode pages (generate/rode.js): the five ranks as a road
   with each rank's test, what each bonus does, the rode finder (static/js/rode-finder.js), the
   masters on the map and province by province, and the rodes side by side. */
.markdown ol.plains-ladder-rodes .plains-ladder-xp {
  margin: 0.1rem 0 0.2rem;
  text-align: left;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.85rem;
}

.markdown ol.plains-ladder-rodes p:last-child {
  margin: 0;
}

.markdown dl.plains-rode-rules dt {
  font-size: 0.85rem;
}

.markdown dl.plains-rode-rules dt a {
  color: var(--plains-gold);
}

.markdown dl.plains-rode-rules dd strong {
  color: var(--plains-parchment);
}

.plains-map-pin circle {
  fill: var(--plains-gold-bright);
  stroke: var(--plains-ink);
  stroke-width: 0.35;
  transition: r 0.2s ease;
}

.plains-map-pin text {
  font-family: var(--font-heading);
  font-size: 1.6px;
  font-weight: 700;
  fill: var(--plains-parchment);
  stroke: rgba(13, 16, 19, 0.9);
  stroke-width: 0.45px;
  paint-order: stroke;
}

.plains-map a:hover .plains-map-pin circle,
.plains-map a:focus-visible .plains-map-pin circle {
  r: 1.2;
}

.plains-map a:hover .plains-map-pin text,
.plains-map a:focus-visible .plains-map-pin text {
  fill: var(--plains-gold-bright);
}

.markdown dl.plains-masters dt a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}

.markdown dl.plains-masters dt img,
.markdown .plains-compare td img {
  width: 1.6rem;
  height: 1.6rem;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

.markdown dl.plains-masters dd a small {
  margin-left: 0.25rem;
  font-size: 0.75rem;
  color: var(--gray-500);
}

.markdown .plains-compare td a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.markdown .plains-compare th small {
  display: block;
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--gray-500);
}

.markdown .plains-rode-compare th {
  white-space: nowrap;
}

.markdown .plains-rode-compare td {
  vertical-align: middle;
}

.markdown .plains-finder-out .plains-finder-built td {
  color: var(--plains-gold-bright);
}

.markdown .plains-finder-out .plains-finder-off td {
  opacity: 0.6;
}

.markdown .plains-rode-finder td:last-child {
  text-align: left;
  white-space: normal;
}

.markdown .plains-rode-finder td small {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8rem;
  line-height: 1.4;
}

/* The Tradesguilds page (generate/tradesguilds.js) and guild pages (generate/tradesguild.js): the
   grades each rank makes on one chart, the pairs of guilds that supply each other, the guild
   finder (static/js/guild-finder.js), how far every province's hall trains each trade, and each
   guild's map with its provinces lit as far as their halls train. */
.markdown .plains-grade-chart table {
  width: auto;
  margin: 0 auto;
}

.markdown .plains-grade-chart th,
.markdown .plains-grade-chart td {
  padding: 0.2rem 0.22rem;
  font-size: 0.75rem;
  text-align: center;
  vertical-align: middle;
}

.markdown .plains-grade-chart thead th {
  vertical-align: bottom;
}

.markdown .plains-grade-chart thead th span {
  display: inline-block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  line-height: 1.1;
}

.markdown .plains-grade-chart th[scope='row'] {
  text-align: left;
  white-space: nowrap;
}

.markdown .plains-grade-chart td {
  width: 1.3rem;
  min-width: 1.3rem;
}

.markdown .plains-grade-chart td.plains-grade-damage {
  color: var(--gray-500);
  font-variant-numeric: tabular-nums;
}

.markdown .plains-grade-chart td.plains-grade-on {
  background: rgba(217, 184, 106, 0.32);
  box-shadow: inset 0 0 0 1px rgba(13, 16, 19, 0.6);
}

.markdown .plains-grade-chart td.plains-grade-best {
  background: var(--plains-gold);
}

.plains-pairs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.75rem;
  margin: 1.25rem 0 1.75rem;
}

.markdown .plains-pair {
  padding: 0.85rem 1rem;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: color-mix(in srgb, var(--body-background) 82%, transparent);
}

.markdown .plains-pair-sigils {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  color: var(--plains-gold-dim);
  font-size: 1.2rem;
}

.markdown .plains-pair-sigils a {
  display: inline-flex;
  flex: none;
}

.markdown .plains-pair-sigils img {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

.markdown .plains-pair strong {
  display: block;
  font-family: var(--font-heading);
  text-align: center;
}

.markdown .plains-pair strong a {
  color: var(--plains-gold);
}

.markdown .plains-pair p {
  margin: 0.35rem 0 0;
  font-size: 0.92rem;
  line-height: 1.45;
}

.markdown .plains-hall-matrix th,
.markdown .plains-hall-matrix td {
  padding: 0.4rem 0.35rem;
  font-size: 0.8rem;
  text-align: center;
  vertical-align: middle;
}

.markdown .plains-hall-matrix thead th a,
.markdown .plains-hall-matrix th[scope='row'] a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.markdown .plains-hall-matrix thead th a {
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.75rem;
}

.markdown .plains-hall-matrix th[scope='row'],
.markdown .plains-hall-matrix thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  text-align: left;
  background: var(--body-background);
}

.markdown .plains-hall-matrix img {
  width: 1.6rem;
  height: 1.6rem;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

.markdown .plains-hall-0 { color: var(--gray-500); }
.markdown td.plains-hall-20 { background: rgba(217, 184, 106, 0.07); }
.markdown td.plains-hall-40 { background: rgba(217, 184, 106, 0.13); }
.markdown td.plains-hall-60 { background: rgba(217, 184, 106, 0.2); }
.markdown td.plains-hall-80 { background: rgba(217, 184, 106, 0.3); color: var(--plains-parchment); }
.markdown td.plains-hall-100 { background: rgba(217, 184, 106, 0.45); color: var(--plains-gold-bright); font-weight: 700; }

.markdown dl.plains-halls .plains-hall-0 dd span {
  opacity: 0.6;
}

.markdown .plains-guild-finder td:last-child {
  width: 58%;
}

.markdown .plains-guild-finder td:first-child small {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  color: var(--gray-500);
}

.markdown dl.plains-skills {
  margin: 1rem 0 1.5rem;
}

.markdown dl.plains-skills > div {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--gray-200);
}

.markdown dl.plains-skills dt {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
}

.markdown dl.plains-skills dt strong {
  color: var(--plains-gold);
}

.markdown dl.plains-skills dt span {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-500);
}

.markdown dl.plains-skills dd {
  margin: 0.2rem 0 0;
  font-size: 0.92rem;
  line-height: 1.45;
}

.markdown dl.plains-skills dd small {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8rem;
  color: var(--gray-500);
}

/* The Classes page (generate/classes.js) and class pages (generate/class.js): the five titles as a
   road, the class finder (static/js/class-finder.js), the disciplines a class teaches with their
   abilities, and the classes side by side. */
.markdown ol.plains-ladder-titles p {
  margin: 0.1rem 0 0;
}

.markdown ol.plains-ladder-titles .plains-ladder-xp {
  margin: 0.1rem 0 0.2rem;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
}

.plains-class-finder .plains-finder-out {
  flex-basis: 100%;
}

.markdown .plains-class-finder td:last-child {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--gray-500);
}

.markdown p.plains-disciplines {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 1rem 0 0.5rem;
}

.markdown p.plains-disciplines a {
  flex: none;
  padding: 0.1rem 0.65rem;
  border: 1px solid var(--plains-gold-dim);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--plains-gold);
}

.markdown p.plains-disciplines a:hover,
.markdown p.plains-disciplines a:focus-visible {
  border-color: var(--plains-gold);
  color: var(--plains-gold-bright);
}

.markdown p.plains-discipline-line {
  margin: 0.25rem 0 0.25rem;
}

.markdown p.plains-discipline-line small {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-500);
}

.markdown dl.plains-abilities {
  margin-top: 0.5rem;
}

.markdown dl.plains-abilities dt span {
  flex: none;
  white-space: nowrap;
}

.markdown dl.plains-finishers dd {
  font-style: italic;
}

.markdown .plains-class-compare td {
  vertical-align: middle;
}

.markdown .plains-class-compare th {
  white-space: nowrap;
}

/* The theme stacks every table into cards on narrow screens; these stay tables, scrolling
   sideways if they must, since their columns are the sheet's columns. */
.plains-table {
  overflow-x: auto;
}

@media screen and (max-width: 48rem) {
  .markdown .plains-table table {
    display: table;
    width: auto;
    min-width: 100%;
  }

  .markdown .plains-table thead {
    display: table-header-group;
  }

  .markdown .plains-table tbody {
    display: table-row-group;
  }

  .markdown .plains-table tr {
    display: table-row;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .markdown .plains-table th,
  .markdown .plains-table td {
    display: table-cell;
    padding: 0.5rem 0.45rem;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--gray-200);
  }

  .markdown .plains-table td:first-child {
    padding-top: 0.5rem;
    color: inherit;
    font-size: inherit;
  }

  .markdown .plains-table td::before {
    content: none;
  }
}

@media screen and (max-width: 40rem) {
  .markdown .plains-table .plains-name-table th,
  .markdown .plains-table .plains-name-table td {
    padding: 0.25rem 0.4rem;
    font-size: 0.82rem;
  }

  .markdown .plains-table .plains-name-table td:first-child {
    width: 2rem;
    padding-top: 0.25rem;
    color: var(--plains-gold-dim);
  }

  .plains-sheet-pages {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .plains-sheet-page + .plains-sheet-page {
    transform: rotate(1deg);
  }

  .plains-picks {
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  }

  .markdown ol.plains-ladder::before {
    left: 1.4rem;
  }

  .plains-ladder-level {
    width: 2.8rem;
    height: 2.8rem;
    font-size: 0.95rem;
  }

  .markdown h2.plains-stage::before {
    width: 1.9rem;
    height: 1.9rem;
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .markdown a.plains-pick,
  .markdown a.book-btn[href],
  .markdown .plains-namer-roll {
    transition: none;
  }

  .markdown a.plains-pick:hover,
  .markdown a.book-btn[href]:hover,
  .markdown .plains-namer-roll:hover {
    transform: none;
  }
}

/* The Continent's pages (generate/theContinent.js and generate/continent/): the adventure sites
   and their map and level finder (static/js/site-finder.js), the kinds of ground, the weather and
   meal rollers (static/js/weather-roller.js, static/js/meal-roller.js), the months, the two suns,
   the wheel of constants, the ages and the people. */
.markdown dl.plains-sites {
  margin: 0.75rem 0 2rem;
  border-top: 1px solid var(--gray-200);
}

.markdown dl.plains-sites > div {
  padding: 0.85rem 0 0.9rem 0.9rem;
  border-bottom: 1px solid var(--gray-200);
  border-left: 3px solid var(--plains-site-color, var(--plains-gold-dim));
  scroll-margin-top: 1rem;
}

.markdown dl.plains-sites > div[hidden] {
  display: none;
}

.markdown dl.plains-sites > div:target {
  background: rgba(236, 208, 138, 0.08);
}

.markdown dl.plains-sites dt {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--plains-parchment);
}

.markdown dl.plains-sites dd {
  margin: 0.15rem 0 0;
}

.markdown dl.plains-sites dd p {
  margin: 0.35rem 0 0;
}

.markdown .plains-site-meta {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--gray-500);
}

.markdown .plains-site-meta a {
  color: var(--plains-gold);
}

.markdown .plains-site-levels {
  font-weight: 700;
  color: var(--plains-site-color, var(--plains-gold));
}

.plains-site-tier-1 { --plains-site-color: #7fbf7a; }
.plains-site-tier-2 { --plains-site-color: #e3c25d; }
.plains-site-tier-3 { --plains-site-color: #e3874d; }
.plains-site-tier-4 { --plains-site-color: #d1524b; }

.markdown img.plains-site-sigil {
  float: right;
  width: 3.5rem;
  height: 3.5rem;
  margin: -2.6rem 0 0.5rem 1rem;
  border: none;
  background: none;
  box-shadow: none;
}

.markdown .plains-sites-none + .plains-sites::before,
.markdown .plains-sites.plains-sites-empty::before {
  content: 'No site here runs at that level.';
  display: block;
  grid-column: 1 / -1;
  padding: 0.6rem 0;
  font-size: 0.85rem;
  color: var(--gray-500);
}

/* The overview's list of a province's sites: a line each, edged in its tier's color, linking to
   its entry on the province's page */
.markdown ul.plains-site-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.3rem 1.25rem;
  margin: 0.75rem 0 2rem;
  padding: 0;
  list-style: none;
}

.markdown ul.plains-site-list > li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  padding: 0.25rem 0 0.25rem 0.6rem;
  border-left: 3px solid var(--plains-site-color, var(--plains-gold-dim));
  scroll-margin-top: 1rem;
}

.markdown ul.plains-site-list > li[hidden] {
  display: none;
}

.markdown ul.plains-site-list > li:target {
  background: rgba(236, 208, 138, 0.08);
}

.markdown ul.plains-site-list .plains-site-levels {
  font-size: 0.8rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.plains-map-sites-dim {
  fill: rgba(13, 16, 19, 0.35);
  pointer-events: none;
}

.plains-map-site {
  stroke: rgba(13, 16, 19, 0.9);
  stroke-width: 0.22;
  cursor: pointer;
  transition: r 0.2s ease, opacity 0.2s ease;
}

.plains-map-site-1 { fill: #7fbf7a; }
.plains-map-site-2 { fill: #e3c25d; }
.plains-map-site-3 { fill: #e3874d; }
.plains-map-site-4 { fill: #d1524b; }

circle.plains-map-site-below {
  fill-opacity: 0.25;
  stroke: currentColor;
  stroke-width: 0.35;
  stroke-dasharray: 0.5 0.3;
}

circle.plains-map-site-below.plains-map-site-1 { color: #7fbf7a; }
circle.plains-map-site-below.plains-map-site-2 { color: #e3c25d; }
circle.plains-map-site-below.plains-map-site-3 { color: #e3874d; }
circle.plains-map-site-below.plains-map-site-4 { color: #d1524b; }

.plains-map-sites a:hover .plains-map-site,
.plains-map-sites a:focus-visible .plains-map-site {
  r: 1.1;
}

.plains-map-sites a.plains-map-site-off {
  opacity: 0.12;
  pointer-events: none;
}

.markdown ul.plains-map-key {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.markdown ul.plains-map-key li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

.markdown ul.plains-map-key i {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: currentColor;
}

.markdown ul.plains-map-key i.plains-map-site-1 { color: #7fbf7a; }
.markdown ul.plains-map-key i.plains-map-site-2 { color: #e3c25d; }
.markdown ul.plains-map-key i.plains-map-site-3 { color: #e3874d; }
.markdown ul.plains-map-key i.plains-map-site-4 { color: #d1524b; }

.markdown ul.plains-map-key i.plains-map-site-below {
  background: transparent;
  border: 1px dashed var(--plains-gold-bright);
}

.plains-site-finder .plains-finder-out {
  align-self: center;
  font-size: 0.95rem;
}

/* The kinds of ground, folded by family */
.markdown dl.plains-grounds > div {
  border-left-color: var(--plains-gold-dim);
}

.markdown .plains-ground-life {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  font-size: 0.85rem;
  color: var(--gray-500);
}

.markdown .plains-ground-life b {
  margin-right: 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--plains-gold);
}

.markdown details.plains-more > summary small {
  margin-left: 0.4rem;
  color: var(--gray-500);
  font-weight: 400;
}

/* The weather and meal rollers */
.plains-weather-roller,
.plains-meal-roller {
  align-items: flex-end;
}

.markdown .plains-weather-out,
.markdown .plains-meal-out {
  flex-basis: 100%;
}

.markdown .plains-weather-out p,
.markdown .plains-meal-out p {
  margin: 0.3rem 0;
}

.markdown .plains-weather-out strong,
.markdown .plains-meal-out strong {
  font-family: var(--font-heading);
  color: var(--plains-gold-bright);
}

.plains-namer.rolling .plains-weather-out strong,
.plains-namer.rolling .plains-meal-out strong {
  color: var(--plains-gold-dim);
}

/* The months as cards round the year */
.markdown ol.plains-months {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 2rem;
  padding: 0;
  list-style: none;
}

.markdown ol.plains-months li {
  position: relative;
  margin: 0;
  padding: 0.85rem 1rem 0.75rem;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: color-mix(in srgb, var(--body-background) 82%, transparent);
  scroll-margin-top: 1rem;
}

.markdown ol.plains-months li.plains-month-now {
  border-color: var(--plains-gold);
  box-shadow: 0 0 18px rgba(255, 154, 60, 0.18);
}

.markdown ol.plains-months li:target {
  border-color: var(--plains-gold-bright);
}

.markdown .plains-month-number {
  position: absolute;
  top: 0.7rem;
  right: 0.9rem;
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--plains-gold-dim);
}

.markdown ol.plains-months strong {
  display: block;
  padding-right: 2rem;
  font-family: var(--font-heading);
  color: var(--plains-parchment);
}

.markdown ol.plains-months p {
  margin: 0.4rem 0 0;
  font-size: 0.9rem;
}

.markdown .plains-month-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.markdown .plains-month-tags span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.05rem 0.55rem;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  font-size: 0.75rem;
}

.markdown .plains-month-now .plains-month-tags span:first-child {
  border-color: var(--plains-gold);
  color: var(--plains-gold-bright);
}

.markdown .plains-month-tags img {
  width: 1rem;
  height: 1rem;
  margin: 0;
  border: none;
  background: none;
  box-shadow: none;
}

/* The two suns and the wheel of constants, drawn on the map's dark ground */
.markdown .plains-suns svg,
.markdown .plains-wheel svg {
  background: radial-gradient(circle at 50% 45%, #1f2630, #11151a 70%);
}

.markdown .plains-wheel svg {
  max-width: 26rem;
  margin: 0 auto;
}

.plains-suns-path {
  fill: none;
  stroke: var(--plains-gold-dim);
  stroke-width: 1;
  stroke-dasharray: 3 2;
}

.plains-suns-arrow {
  fill: none;
  stroke: var(--plains-gold);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plains-suns-sun circle {
  fill: #e9b25c;
  stroke: none;
}

.plains-suns-sun circle:first-child {
  fill: #f3c76f;
  filter: drop-shadow(0 0 6px rgba(255, 170, 70, 0.7));
}

.plains-suns-sun circle.plains-suns-orbit {
  fill: none;
  stroke: rgba(236, 208, 138, 0.35);
  stroke-width: 0.6;
  filter: none;
}

.plains-suns-label,
.plains-suns-urd text,
.plains-suns-note,
.plains-wheel text {
  font-family: var(--font-heading);
  text-anchor: middle;
  paint-order: stroke;
}

.plains-suns-label {
  font-size: 6px;
  font-weight: 800;
  fill: var(--plains-ink);
}

.plains-suns-urd circle {
  fill: #5fa8d3;
  stroke: var(--plains-parchment);
  stroke-width: 0.6;
}

.plains-suns-urd text {
  font-size: 6px;
  font-weight: 700;
  fill: var(--plains-parchment);
}

.plains-suns-belt circle {
  fill: rgba(243, 231, 207, 0.55);
}

.plains-suns-note {
  font-size: 5px;
  font-style: italic;
  fill: var(--plains-gold-bright);
}

.plains-wheel-ring {
  fill: none;
  stroke: var(--plains-gold-dim);
  stroke-width: 0.8;
}

.plains-wheel-star {
  fill: none;
  stroke: rgba(236, 208, 138, 0.25);
  stroke-width: 0.6;
}

.plains-wheel-thread circle,
.plains-wheel-seam circle {
  stroke: var(--plains-ink);
  stroke-width: 0.8;
}

.plains-wheel-thread text {
  font-size: 6px;
  font-weight: 800;
  fill: var(--plains-ink);
}

.plains-wheel-seam text {
  font-size: 6.4px;
  font-weight: 700;
  fill: var(--plains-parchment);
  stroke: rgba(13, 16, 19, 0.9);
  stroke-width: 0.6px;
}

.plains-wheel-seam tspan {
  font-size: 5.2px;
  font-weight: 400;
  font-style: italic;
  fill: var(--plains-gold-bright);
}

/* The ages, the hooks and the people */
.markdown ol.plains-ladder-ages strong a {
  color: var(--plains-parchment);
}

.markdown dl.plains-events dt {
  font-variant-numeric: tabular-nums;
}

.markdown dl.plains-people dt,
.markdown dl.plains-events dt {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.9rem;
}

.markdown dl.plains-people > div {
  scroll-margin-top: 1rem;
}

.markdown .plains-group-home {
  margin: -0.4rem 0 0.6rem;
  font-size: 0.85rem;
}

.markdown .plains-group-home a,
.markdown dl.plains-bleak dt {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.markdown .plains-group-home img,
.markdown dl.plains-bleak dt img {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  border: none;
  background: none;
  box-shadow: none;
}

.markdown .plains-hooks .plains-pair strong {
  text-align: left;
  color: var(--plains-gold-bright);
}

.markdown .plains-hooks .plains-pair p {
  margin: 0.4rem 0 0;
  font-size: 0.92rem;
}

.markdown .plains-more-link {
  font-size: 0.85rem;
}

@media (max-width: 40rem) {
  .markdown img.plains-site-sigil {
    width: 2.5rem;
    height: 2.5rem;
    margin-top: -2.2rem;
  }
}

/* Narsis's page outlines the province it lies under, dashed: it has no ground of its own */
.plains-map-outline-below {
  stroke-dasharray: 0.5 0.5;
  stroke-linecap: butt;
}

/* The Items pages (generate/items.js and generate/items/): the five parts of an item as a chain,
   what things cost on a scale that grows tenfold a step, strips of shares (where a blow lands,
   the odds of each grade and condition), the four levels of light, armor classes as chips, the
   provinces that sell a thing, the slots and groups to jump to, the proficiency matrix, the
   material lookup (static/js/material-lookup.js) and the loot roller (static/js/loot-roller.js). */
.markdown ol.plains-anatomy {
  position: relative;
  clear: both;
  margin: 1.25rem 0 1rem;
  padding: 0;
  list-style: none;
}

/* The chain running down behind the sigils */
.markdown ol.plains-anatomy::before {
  content: '';
  position: absolute;
  top: 1.5rem;
  bottom: 1.5rem;
  left: 1.95rem;
  width: 2px;
  background: linear-gradient(var(--plains-gold), var(--plains-gold-dim) 50%, rgba(143, 115, 55, 0.3));
}

.markdown ol.plains-anatomy li {
  position: relative;
  margin: 0 0 0.5rem;
}

.markdown ol.plains-anatomy a {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  align-items: center;
  column-gap: 1rem;
  padding: 0.55rem 0.75rem 0.55rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--body-font-color);
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.markdown ol.plains-anatomy a:hover,
.markdown ol.plains-anatomy a:focus-visible {
  border-color: var(--plains-gold-dim);
  background: rgba(217, 184, 106, 0.06);
}

.markdown ol.plains-anatomy img {
  grid-row: span 2;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--body-background);
  box-shadow: none;
  filter: drop-shadow(0 0 8px rgba(255, 154, 60, 0.25));
}

.markdown ol.plains-anatomy strong {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  line-height: 1.2;
  color: var(--plains-gold);
}

.markdown ol.plains-anatomy span {
  font-size: 0.92rem;
  line-height: 1.45;
}

.markdown ol.plains-prices {
  margin: 1rem 0 1.75rem;
  padding: 0;
  list-style: none;
}

.markdown ol.plains-prices li {
  display: grid;
  grid-template-columns: minmax(4.5rem, 7.5rem) minmax(3rem, 1fr) minmax(4.5rem, 7.5rem);
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.45rem;
}

.markdown .plains-price-name {
  font-family: var(--font-heading);
  text-align: right;
}

.markdown .plains-price-bar {
  height: 0.7rem;
  border-radius: 999px;
  background: rgba(217, 184, 106, 0.08);
  overflow: hidden;
}

.markdown .plains-price-bar::before {
  content: '';
  display: block;
  width: max(0.7rem, var(--plains-price));
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--plains-gold-dim), var(--plains-gold-bright));
  box-shadow: 0 0 10px rgba(255, 154, 60, 0.3);
}

.markdown ol.plains-prices strong {
  font-size: 0.9rem;
  color: var(--plains-gold-bright);
  font-variant-numeric: tabular-nums;
}

@media screen and (max-width: 40rem) {
  .markdown ol.plains-prices li {
    gap: 0.5rem;
    font-size: 0.85rem;
  }
}

/* Labelled bars, each as long as its share of the longest (where a blow lands) */
.markdown ol.plains-bars {
  margin: 1rem 0 1.5rem;
  padding: 0;
  list-style: none;
}

.markdown ol.plains-bars li {
  display: grid;
  grid-template-columns: minmax(4.5rem, 6.5rem) minmax(3rem, 1fr) minmax(4rem, 5.5rem);
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.4rem;
}

.markdown .plains-bar-name {
  font-family: var(--font-heading);
  text-align: right;
}

.markdown .plains-bar {
  height: 0.7rem;
  border-radius: 999px;
  background: rgba(217, 184, 106, 0.08);
  overflow: hidden;
}

.markdown .plains-bar::before {
  content: '';
  display: block;
  width: max(0.7rem, var(--plains-bar));
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--plains-gold-dim), var(--plains-gold-bright));
}

.markdown .plains-bar-note {
  font-size: 0.85rem;
  color: var(--gray-500);
  font-variant-numeric: tabular-nums;
}

/* A share in a table cell, with a bar beneath it */
.markdown .plains-meter {
  display: inline-block;
  min-width: 4rem;
  font-variant-numeric: tabular-nums;
}

.markdown .plains-meter::after {
  content: '';
  display: block;
  width: var(--plains-bar);
  height: 3px;
  margin-top: 0.15rem;
  border-radius: 999px;
  background: var(--plains-gold);
}

/* Five numbers against bash, slash, pierce, unarmed and exotic in one cell */
.markdown .plains-ac {
  display: inline-grid;
  grid-template-columns: repeat(5, 1.2rem);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.markdown th .plains-ac {
  display: grid;
  margin-top: 0.1rem;
  font-size: 0.7rem;
  color: var(--gray-500);
}

.markdown th .plains-ac abbr {
  text-decoration: none;
  cursor: help;
}

.markdown .plains-ac .plains-ac-best {
  color: var(--plains-gold-bright);
  font-weight: 700;
}

/* The four levels of light, from a dark that swallows sound to full light */
.markdown ol.plains-light-scale {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 1.25rem 0 1.75rem;
  padding: 0;
  list-style: none;
  border: 1px solid var(--plains-gold-dim);
  border-radius: 10px;
  overflow: hidden;
}

.markdown ol.plains-light-scale li {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0;
  padding: 1rem 0.9rem;
  font-size: 0.88rem;
  line-height: 1.4;
}

.markdown .plains-light-0 { background: #07080a; color: var(--gray-500); }
.markdown .plains-light-1 { background: #1a1712; }
.markdown .plains-light-2 { background: radial-gradient(circle at 50% 0%, rgba(255, 170, 70, 0.28), #2a2116 75%); }
.markdown .plains-light-3 { background: radial-gradient(circle at 50% 0%, rgba(255, 214, 140, 0.55), #5a4423 80%); color: var(--plains-parchment); }

.markdown ol.plains-light-scale strong {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--plains-gold);
}

.markdown .plains-light-0 strong { color: var(--plains-gold-dim); }
.markdown .plains-light-3 strong { color: #fff3d6; text-shadow: 0 0 12px rgba(255, 200, 120, 0.6); }

.markdown .plains-light-level {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-variant-numeric: tabular-nums;
}

@media screen and (max-width: 40rem) {
  .markdown ol.plains-light-scale {
    grid-template-columns: 1fr 1fr;
  }
}

/* The classes of armor a piece counts as */
.markdown .plains-chips {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.15rem;
  max-width: 3.1rem;
}

.markdown .plains-chip {
  min-width: 1.3rem;
  padding: 0 0.25rem;
  text-align: center;
  cursor: help;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  font-size: 0.72rem;
  line-height: 1.5;
}

.markdown .plains-chip-medium { border-color: var(--plains-gold-dim); }
.markdown .plains-chip-heavy { border-color: var(--plains-gold); color: var(--plains-gold-bright); }
.markdown .plains-chip-exotic { border-color: #b98bd9; color: #dcc2ef; }

/* The provinces that sell a thing, as a row of their sigils */
.markdown .plains-sold {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.15rem;
  max-width: 4.3rem;
}

.markdown .plains-compare .plains-sold a {
  display: inline-flex;
  gap: 0;
}

.markdown .plains-compare .plains-sold img {
  width: 1.25rem;
  height: 1.25rem;
}

/* The slots (or groups) of a page as chips to jump to */
.markdown .plains-slot-nav {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1rem 0 1.5rem;
}

.markdown .plains-slot-nav a {
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  color: var(--body-font-color);
  font-size: 0.9rem;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.markdown .plains-slot-nav a:hover,
.markdown .plains-slot-nav a:focus-visible {
  border-color: var(--plains-gold);
  color: var(--plains-gold-bright);
}

.markdown .plains-slot-nav small {
  margin-left: 0.2rem;
  color: var(--gray-500);
  font-variant-numeric: tabular-nums;
}

/* Tables with many numbers run a little smaller, their names free to wrap */
.markdown .plains-armor-table td,
.markdown .plains-armor-table th {
  padding: 0.4rem 0.3rem;
  font-size: 0.82rem;
}

.markdown .plains-armor-table th {
  font-size: 0.78rem;
}

.markdown .plains-armor-table td {
  white-space: normal;
}

.markdown .plains-armor-table .plains-ac {
  white-space: nowrap;
}

.markdown .plains-armor-table td:first-child {
  white-space: normal;
  min-width: 6.5rem;
}

.markdown .plains-armor-table td:first-child small {
  display: block;
  margin-left: 0;
}

.markdown .plains-armor-table td small,
.markdown .plains-compare td small {
  margin-left: 0.25rem;
  font-size: 0.75rem;
  color: var(--gray-500);
}

.markdown .plains-item-still {
  display: inline-block;
  width: 44px;
  height: 44px;
  margin: -0.45rem 0.35rem -0.45rem -0.15rem;
  vertical-align: middle;
  object-fit: contain;
  cursor: zoom-in;
}

/* The item model a reader lingers on (static/js/item-models.js), rising out of its still */
.plains-item-pop {
  position: absolute;
  z-index: 40;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background: color-mix(in srgb, var(--body-background) 94%, transparent);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: scale(var(--plains-item-from, 0.25));
  transition: opacity 0.16s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}

.plains-item-pop.open {
  opacity: 1;
  transform: none;
}

.plains-item-pop model-viewer,
.plains-item-pop img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  --poster-color: transparent;
}

.plains-item-pop img {
  object-fit: contain;
  transition: opacity 0.15s ease;
}

.plains-item-pop img.gone {
  opacity: 0;
}

.markdown .plains-proficiency-matrix thead th {
  vertical-align: bottom;
}

.markdown .plains-proficiency-matrix thead th span {
  display: inline-block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

.markdown .plains-proficiency-matrix th,
.markdown .plains-proficiency-matrix td {
  padding: 0.3rem 0.2rem;
  font-size: 0.72rem;
}

.markdown .plains-proficiency-matrix td,
.markdown .plains-armor-matrix td {
  min-width: 1.9rem;
}

.markdown .plains-proficiency-matrix th[scope='row'],
.markdown .plains-armor-matrix th[scope='row'] {
  min-width: 8.5rem;
  padding-right: 0.5rem;
  font-size: 0.85rem;
}

.markdown .plains-proficiency-matrix img,
.markdown .plains-armor-matrix img {
  width: 1.3rem;
  height: 1.3rem;
}

.markdown .plains-armor-matrix td,
.markdown .plains-armor-matrix thead th {
  min-width: 4.5rem;
  font-size: 0.8rem;
}

.markdown td.plains-hall-100 {
  background: rgba(217, 184, 106, 0.42);
  color: var(--plains-gold-bright);
  font-weight: 700;
}

.markdown dl.plains-sources dd small {
  margin-left: 0.35rem;
  font-size: 0.75rem;
  color: var(--gray-500);
  white-space: nowrap;
}

.markdown dl.plains-sources dd {
  display: block;
}

/* The material lookup */
.plains-material-lookup[hidden] {
  display: none;
}

.markdown .plains-material-out {
  flex-basis: 100%;
}

.markdown .plains-material-name {
  margin: 0.25rem 0 0.4rem;
}

.markdown .plains-material-name strong {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--plains-gold-bright);
}

.markdown .plains-material-name small {
  margin-left: 0.4rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--gray-500);
}

.markdown .plains-material-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.markdown .plains-material-sizes span {
  padding: 0.1rem 0.6rem;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  font-size: 0.85rem;
}

.markdown .plains-material-sizes b {
  margin-left: 0.25rem;
  color: var(--plains-gold);
  font-variant-numeric: tabular-nums;
}

.markdown .plains-material-from {
  font-size: 0.9rem;
  color: var(--gray-500);
}

/* The loot roller */
.plains-loot-roller {
  align-items: flex-end;
}

.markdown .plains-upbringing-pick input {
  width: 6rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  background: var(--body-background);
  color: var(--body-font-color);
  font: inherit;
  font-size: 0.95rem;
}

.markdown .plains-upbringing-pick[hidden] {
  display: none;
}

.markdown .plains-loot-out {
  flex-basis: 100%;
}

.markdown .plains-loot-out p {
  margin: 0.3rem 0;
}

.markdown ol.plains-loot-list {
  margin: 0.4rem 0 0.6rem;
  padding-left: 1.4rem;
}

.markdown ol.plains-loot-list li {
  margin: 0.35rem 0;
}

.markdown ol.plains-loot-list strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--plains-gold-bright);
}

.markdown ol.plains-loot-list span {
  display: block;
  font-size: 0.88rem;
  color: var(--body-font-color);
}

.plains-namer.rolling ol.plains-loot-list strong {
  color: var(--plains-gold-dim);
}

/* An Items table's closing column of words reads left, at a size that suits a line or two */
.markdown .plains-described td:last-child {
  min-width: 11rem;
  text-align: left;
  font-size: 0.86rem;
  line-height: 1.45;
}

/* A second line under a number in an Items table: a material's top worth, its wear */
.markdown .plains-armor-table td small {
  display: block;
  margin-left: 0;
}

.markdown .plains-magic-odds th small {
  white-space: normal;
}

.markdown .plains-roll-table td:first-child,
.markdown .plains-roll-table td:nth-child(2) {
  white-space: nowrap;
}

/* Creatures: a creature's size and rank under its name in a table */
.markdown .plains-creature-table td:first-child small {
  display: block;
  font-size: 0.72rem;
  color: var(--gray-500);
}

.markdown .plains-creature-table td:first-child strong {
  scroll-margin-top: 4rem;
}

/* An animal's description, written out under its name so a phone shows it too */
.markdown .plains-creature-table td:first-child:has(.plains-creature-said) {
  min-width: 15rem;
  max-width: 24rem;
  white-space: normal;
}

.markdown .plains-creature-table .plains-creature-said {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--body-font-color);
  opacity: 0.85;
}

.markdown .plains-creature-table td:first-child strong:target {
  outline: 1px solid var(--plains-gold);
  outline-offset: 0.2rem;
}

/* A mount's speed as four pips, as many lit as it has quarters */
.markdown .plains-pips {
  display: inline-flex;
  gap: 0.2rem;
}

.markdown .plains-pips i {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  border: 1px solid var(--plains-gold-dim);
}

.markdown .plains-pips i.on {
  background: var(--plains-gold-bright);
  border-color: var(--plains-gold-bright);
}

/* A creature's card: its numbers, its elements and where it's met */
.markdown .plains-creature-stats {
  font-variant-numeric: tabular-nums;
}

.markdown .plains-creature-stats strong {
  color: var(--plains-gold-bright);
}

.markdown .plains-creature-elements,
.markdown .plains-creature-where {
  font-size: 0.88rem;
  color: var(--gray-500);
}

.markdown .plains-creature-where {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.markdown .plains-creature-where img {
  width: 1.4rem;
  height: 1.4rem;
  margin: 0;
}

/* How dangerous: the creatures' names link to them */
.markdown ol.plains-danger .plains-price-name a {
  color: inherit;
}

.markdown .plains-creature-where .plains-sold {
  max-width: none;
  justify-content: flex-start;
}

.markdown .plains-creature-table .plains-sold {
  max-width: 9.5rem;
  justify-content: flex-start;
}

/* The Combat pages (generate/combat.js and generate/combat/): a fight told blow by blow as the game
   prints it, the moves as cards, the words for a blow growing louder with the damage, the
   classes that learn each extra attack and guard, and the blow roller (static/js/blow-roller.js). */
.markdown ol.plains-combat-log {
  margin: 1.25rem 0 1.5rem;
  padding: 0;
  list-style: none;
  border: 1px solid var(--plains-gold-dim);
  border-radius: 10px;
  background: color-mix(in srgb, var(--plains-ink) 70%, transparent);
  overflow: hidden;
}

.markdown ol.plains-combat-log > li {
  margin: 0;
  padding: 0.7rem 1rem 0.8rem;
  border-top: 1px solid rgba(217, 184, 106, 0.15);
}

.markdown ol.plains-combat-log > li:first-child {
  border-top: none;
}

.markdown .plains-log-round {
  margin: 0 0 0.4rem;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--plains-gold);
}

.markdown .plains-log-round span {
  margin-left: 0.5rem;
  font-family: var(--body-font-family, inherit);
  letter-spacing: normal;
  text-transform: none;
  color: var(--gray-500);
}

.markdown ol.plains-combat-log ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.markdown ol.plains-combat-log ul li {
  display: grid;
  grid-template-columns: minmax(8rem, 13rem) 1fr;
  column-gap: 1rem;
  margin: 0.2rem 0;
}

.markdown ol.plains-combat-log ul li small {
  grid-column: 2;
  font-size: 0.82rem;
  color: var(--gray-500);
}

.markdown .plains-log-roll {
  font-size: 0.8rem;
  color: var(--gray-500);
  font-variant-numeric: tabular-nums;
}

.markdown .plains-log-line {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 0.88rem;
}

/* Blows as the game colors them: one you land green, one that lands on you red, a miss gray,
   and here a fumble amber and a critical gold */
.markdown .plains-log-hit .plains-log-line {
  color: #8fd48a;
}

.markdown .plains-log-hurt .plains-log-line {
  color: #e8806f;
}

.markdown .plains-log-miss .plains-log-line,
.markdown .plains-log-turn .plains-log-line {
  color: var(--gray-500);
}

.markdown .plains-log-fumble .plains-log-line {
  color: #e8a35c;
}

.markdown .plains-log-badge {
  margin-right: 0.35rem;
  padding: 0 0.35rem;
  border-radius: 3px;
  background: var(--plains-gold-bright);
  color: var(--plains-ink);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.markdown .plains-log-critical .plains-log-line {
  color: var(--plains-gold-bright);
}

.markdown .plains-log-damage {
  margin-left: 0.4rem;
  color: var(--gray-500);
}

.markdown .plains-log-damage::before {
  content: '[';
}

.markdown .plains-log-damage::after {
  content: ']';
}

@media screen and (max-width: 40rem) {
  .markdown ol.plains-combat-log ul li {
    grid-template-columns: 1fr;
    margin: 0.45rem 0;
  }

  .markdown ol.plains-combat-log ul li small {
    grid-column: 1;
  }
}

/* A move as a card */
.markdown .plains-moves {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.9rem;
  margin: 1.25rem 0 1.5rem;
}

.markdown .plains-move {
  padding: 0.9rem 1rem 0.6rem;
  border: 1px solid var(--plains-gold-dim);
  border-radius: 10px;
  background: color-mix(in srgb, var(--body-background) 82%, transparent);
  scroll-margin-top: 4rem;
}

.markdown .plains-move h3 {
  margin: 0 0 0.4rem;
  color: var(--plains-gold-bright);
}

.markdown .plains-move-cost {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0 0 0.6rem;
}

.markdown .plains-move-cost span {
  padding: 0.05rem 0.5rem;
  border: 1px solid rgba(217, 184, 106, 0.35);
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--plains-gold);
}

.markdown .plains-move-roll {
  margin: 0 0 0.6rem;
  text-align: left;
  font-family: var(--font-heading);
  color: var(--plains-parchment);
}

.markdown .plains-move-roll small {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--body-font-family, inherit);
  font-size: 0.82rem;
  color: var(--gray-500);
}

.markdown .plains-move dd {
  text-align: left;
}

.markdown .plains-move dl {
  margin: 0;
}

.markdown .plains-move dl div {
  margin: 0 0 0.45rem;
}

.markdown .plains-move dt {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--plains-gold-dim);
}

.markdown .plains-move dd {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
}

/* The words for a blow, each a step louder than the last */
.markdown ol.plains-verbs {
  margin: 1rem 0 1.5rem;
  padding: 0;
  list-style: none;
}

.markdown ol.plains-verbs li {
  display: grid;
  grid-template-columns: minmax(4.5rem, 6.5rem) 1fr;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0 0 0.25rem;
}

.markdown .plains-verb-damage {
  font-size: 0.82rem;
  text-align: right;
  color: var(--gray-500);
  font-variant-numeric: tabular-nums;
}

.markdown ol.plains-verbs strong {
  font-family: var(--font-heading);
  font-size: calc(0.95rem + var(--plains-loud) * 0.75rem);
  color: color-mix(in srgb, var(--plains-gold-bright) calc(40% + var(--plains-loud) * 60%), var(--gray-500));
  text-shadow: 0 0 calc(var(--plains-loud) * 16px) rgba(255, 154, 60, 0.35);
}

/* Which class learns each extra attack and guard, at what level */
.markdown .plains-learned td.plains-hall-100 {
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

/* The blow roller: its odds over the button, and the blow told as a line of the game's */
.markdown .plains-blow-odds {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.9rem;
}

.markdown .plains-blow-odds strong {
  color: var(--plains-gold-bright);
}

.markdown .plains-blow-out {
  flex-basis: 100%;
}

.markdown .plains-blow-out p {
  font-style: normal;
}

.markdown .plains-blow-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
}

.markdown .plains-blow-line .plains-log-roll {
  min-width: 9rem;
}

/* A stat that links to the rules behind it (a race's natural armor and unarmed attack). */
a.plains-stat {
  text-decoration: none;
  transition: border-color 0.15s ease;
}

a.plains-stat:hover,
a.plains-stat:focus-visible {
  border-color: var(--plains-gold-dim);
}

/* The Glossary's row of letters, each jumping to its terms. */
.plains-letters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  font-family: var(--font-heading);
  font-size: 1.15rem;
}

/* A ready-made character's race and class sigils, side by side under their name, and the small
   sigils beside a tradesguild's name in their facts. */
.plains-pregen-sigils {
  display: flex;
  gap: 0.75rem;
}

.plains-pregen-sigils a {
  flex: none;
}

.plains-pregen-sigils img {
  margin: 0;
}

.plains-facts dd img {
  display: inline;
  margin: 0 0.25em 0 0;
  vertical-align: -0.25em;
}

/* A score's modifier, under the score in a stat box. */
.plains-stat small + small {
  letter-spacing: 0;
  color: var(--plains-gold);
}

/* An adventure's lines for the storyteller to read aloud, set apart like a page from a book, and a
   cast member's line in their own voice. */
.markdown .plains-read-aloud {
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--plains-gold-dim);
  border-radius: 8px;
  background: color-mix(in srgb, var(--body-background) 70%, rgba(217, 184, 106, 0.08));
  font-style: italic;
}

.markdown .plains-adventure-says {
  margin-top: -0.25rem;
  font-style: italic;
  color: var(--plains-parchment);
}

/* The Quick Reference: its blocks in columns that fill the page, compact tables, and on paper
   nothing but the blocks. */
.plains-ref {
  columns: 2 22rem;
  column-gap: 1.25rem;
}

.plains-ref-block {
  break-inside: avoid;
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: color-mix(in srgb, var(--body-background) 82%, transparent);
}

.markdown .plains-ref-block h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}

.markdown .plains-ref-block p {
  margin: 0 0 0.5rem;
  font-size: 0.92rem;
}

.markdown .plains-ref-block table {
  display: table;
  width: 100%;
  margin: 0;
  font-size: 0.85rem;
}

.markdown .plains-ref-block td {
  padding: 0.2rem 0.4rem;
  vertical-align: top;
}

@media print {
  .book-menu,
  .book-toc,
  .book-header,
  .plains-opening {
    display: none !important;
  }

  .plains-ref-block {
    border-color: #999;
    background: none;
    color: #000;
  }
}

/* A scene told roll by roll: each speaker in gold, what they say, and the roll it takes set apart
   underneath. */
.markdown .plains-scene {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.markdown .plains-scene li {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0.15rem 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--gray-200);
}

.markdown .plains-scene strong {
  color: var(--plains-gold);
}

.markdown .plains-scene small {
  grid-column: 2;
  color: var(--gray-500);
  font-style: italic;
}

@media (max-width: 40rem) {
  .markdown .plains-scene li {
    grid-template-columns: 1fr;
  }

  .markdown .plains-scene small {
    grid-column: 1;
  }
}