/* Road to Redemption: the print room. The site is a dark room hung with the game's engravings:
   warm engraved black, paper-coloured type, each painting framed by a fine plate line, ember the one
   tint. The palette tokens are the game's (www/content/art/palette.md); the site's own are below
   them. Dark single theme by design (art/visual-identity.html, "Type and frames"). */

:root {
  color-scheme: dark;

  /* Core palette */
  --abyss: #07080b;
  --soot: #141317;
  --basalt: #24222a;
  --bone: #ddd5c0;
  --ash: #9aa7c7;
  --brass: #c7a86b;
  --ember: #ff8a3d;
  --cinder: #e8663a;
  --gilded: #f2c84b;
  --spark: #fff3c4;
  --tide: #6fd0d8;
  --rime: #8fd8ff;
  --drowned: #2b4a52;
  --gloom: #6b5a7a;
  --storm: #ffe86b;
  --blood: #9e1410;
  --mana: #1a33b8;

  /* Item rarity */
  --r-normal: #c8c2b2;
  --r-magic: #8fa6ff;
  --r-rare: #f2c84b;
  --r-unique: #d9772f;

  /* Damage types */
  --d-physical: var(--bone);
  --d-fire: var(--ember);
  --d-cold: var(--rime);
  --d-lightning: var(--storm);

  /* Act palettes (art direction v0.2) */
  --a-meadow: #6f8f4e;
  --a-wheat: #d8b866;
  --a-sky: #8fb6d8;
  --a-moss: #4d6b3a;
  --a-bark: #3b2f24;
  --a-drygrass: #c2a35a;
  --a-heather: #7d5a78;
  --a-snow: #e9eef2;
  --a-salt: #f1ece0;
  --a-sand: #e3d3b0;
  --a-turquoise: #5fc7d6;

  /* Strata (v0.1, still used by the act palettes) */
  --s-iron: #3d3b40; /* riveted iron (site-invented hex) */
  --s-slate: #2a333a;
  --s-verdigris: #4f7a6e;
  --s-violet: #3a2f48;
  --s-amber: #d9a441;
  --s-basalt: #1a1716;
  --s-magma: #ff6a3d;
  --s-void: #0b0710;
  --s-ether: #a8fff4; /* ether cyan (site-invented hex) */

  /* The print room: the site's own surfaces, chosen by Alex on 26 October 2026 */
  --ground: #100d0b; /* engraved black, warm: the page */
  --panel: #1a1613; /* a panel on it */
  --raised: #29231e; /* raised surfaces, hover */
  --paper: #ebdfc6; /* the engravings' paper: headings, the brightest type */
  --frame: #8c7d66; /* the plate line: frames, rules, the quiet accent */
  --rule: color-mix(in srgb, var(--frame) 60%, transparent);
  --rule-soft: color-mix(in srgb, var(--frame) 26%, transparent);
  --line: #332b24;
  --text: #e2d7c1;
  --muted: #a39782;

  /* Type */
  --f-display: 'IM Fell English', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --f-caps: 'IM Fell English SC', 'IM Fell English', Georgia, serif;
  --f-body: 'Alegreya', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --f-util: 'IBM Plex Sans Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;

  --gutter: clamp(16px, 4.5vw, 56px);
  --measure: 42rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--ground);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-variant-numeric: oldstyle-nums proportional-nums;
  overflow-x: hidden;
}

@media (min-width: 720px) {
  body {
    font-size: 1.125rem;
  }
}

img {
  max-width: 100%;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 1px solid var(--ember);
  outline-offset: 3px;
}

::selection {
  background: color-mix(in srgb, var(--ember) 35%, transparent);
  color: var(--spark);
}

.skip {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 10;
  padding: 0.5rem 1rem;
  background: var(--panel);
  border: 1px solid var(--frame);
  font-family: var(--f-util);
}
.skip:focus {
  left: var(--gutter);
  top: 0.5rem;
}

.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1;
}

/* --- Masthead ------------------------------------------------------------------------------ */

.masthead {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  position: relative;
  z-index: 2;
}
.masthead__inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-height: 3.75rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  flex: none;
}
.brand__word {
  font-family: var(--f-caps);
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  color: var(--paper);
}
.brand__mark {
  width: 26px;
  height: 26px;
  display: block;
}
@media (max-width: 420px) {
  .masthead__inner {
    gap: 1rem;
  }
  .brand {
    gap: 0.45rem;
  }
  .brand__word {
    font-size: 1.05rem;
  }
  .brand__mark {
    width: 24px;
    height: 24px;
  }
}
.brand__mark--dot {
  width: 9px;
  height: 9px;
  margin: 0 4px;
  background: var(--ember);
  box-shadow: 0 0 6px 1px color-mix(in srgb, var(--ember) 80%, transparent), 0 0 18px 4px color-mix(in srgb, var(--cinder) 40%, transparent);
  transform: rotate(45deg);
}

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav a {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 1rem;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.nav a:hover {
  color: var(--text);
}
.nav a[aria-current] {
  color: var(--text);
  box-shadow: inset 0 -1px 0 var(--ember);
}
.nav--wide {
  margin-left: auto;
}
.nav--wide > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.25rem 1.15rem;
}
.nav--wide a {
  display: inline-block;
  padding: 0.35rem 0;
}
.icon {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
}

/* The Story menu: World, Journey and Fallen under one name. Opens on hover, and on click (search.js). */
.nav__menu {
  position: relative;
}
.nav__menu > button {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.35rem 0;
  background: none;
  border: 0;
  font: inherit;
  font-family: var(--f-body);
  font-size: 1rem;
  letter-spacing: 0.01em;
  color: var(--muted);
  cursor: pointer;
}
.nav__menu > button:hover,
.nav__menu.is-open > button {
  color: var(--text);
}
.nav__menu.is-current > button {
  color: var(--text);
  box-shadow: inset 0 -1px 0 var(--ember);
}
.nav__chevron {
  width: 0.95rem;
  height: 0.95rem;
  transition: transform 0.15s;
}
.nav__menu.is-open .nav__chevron {
  transform: rotate(180deg);
}
.nav__sub {
  display: none;
  position: absolute;
  top: 100%;
  left: -1rem;
  min-width: 11rem;
  padding: 0.4rem 0;
  background: var(--panel);
  border: 1px solid var(--rule);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--ground) 85%, transparent);
}
.nav__menu.is-open .nav__sub {
  display: block;
}
@media (hover: hover) {
  .nav__menu:hover .nav__sub {
    display: block;
  }
  .nav__menu:hover .nav__chevron {
    transform: rotate(180deg);
  }
}
.nav--wide .nav__sub a {
  display: block;
  padding: 0.45rem 1rem;
  box-shadow: none;
}
.nav--wide .nav__sub a:hover {
  background: color-mix(in srgb, var(--ember) 12%, transparent);
}
.nav--wide .nav__sub a[aria-current] {
  box-shadow: inset 2px 0 0 var(--ember);
}

/* The tools: the wiki and the asset explorer, set apart from the reading as plates with icons. */
.tools {
  display: flex;
  gap: 0.5rem;
  flex: none;
}
.tool {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.38rem 0.65rem;
  border: 1px solid var(--rule);
  font-family: var(--f-util);
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: var(--paper);
  text-decoration: none;
  transition: border-color 0.15s, background-color 0.15s;
}
.tool .icon {
  color: var(--ember);
}
.tool:hover,
.tool[aria-current] {
  border-color: var(--ember);
  background: color-mix(in srgb, var(--ember) 10%, transparent);
}
.nav--narrow {
  display: none;
  margin-left: auto;
}
.nav--narrow summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--f-util);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--text);
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--rule);
}
.nav--narrow summary::-webkit-details-marker {
  display: none;
}
.nav--narrow[open] summary {
  border-color: var(--frame);
  color: var(--frame);
}
.nav--narrow nav {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
  padding: 0.5rem var(--gutter) 1rem;
}
.nav--narrow ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
}
.nav--narrow a {
  display: block;
  padding: 0.6rem 0;
  font-size: 1rem;
  border-bottom: 1px solid var(--line);
}

@media (max-width: 1200px) {
  .nav--wide {
    display: none;
  }
  .nav--narrow {
    display: block;
  }
  .tools {
    margin-left: auto;
  }
}
@media (max-width: 760px) {
  .tool {
    padding: 0.38rem 0.5rem;
  }
  .tool__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* --- Shared layout ------------------------------------------------------------------------- */

.shell {
  max-width: 80rem;
  margin: 0 auto;
  padding: clamp(1.75rem, 5vw, 3.5rem) var(--gutter) clamp(3rem, 8vw, 6rem);
}

.crumbs ol {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  font-family: var(--f-util);
  font-size: 0.88rem;
  color: var(--muted);
}
.crumbs li + li::before {
  content: '/';
  color: var(--raised);
  margin: 0 0.6em;
}
.crumbs a {
  text-decoration: none;
}
.crumbs a:hover {
  color: var(--text);
}
.crumbs [aria-current] {
  color: var(--text);
}

h1,
h2,
h3,
h4 {
  font-weight: 400;
  margin: 0;
  text-wrap: balance;
}
h1 {
  font-family: var(--f-display);
  font-size: clamp(2.3rem, 5.8vw, 3.9rem);
  line-height: 1.04;
  color: var(--paper);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--f-util);
  font-weight: 500;
  font-size: 0.8rem;
  line-height: 1;
  letter-spacing: 0.02em;
  padding: 0.32em 0.6em 0.3em;
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}
.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border: 1px solid currentColor;
  transform: rotate(45deg);
  flex: none;
}
.badge--game {
  color: var(--ember);
  border-color: color-mix(in srgb, var(--ember) 45%, transparent);
}
.badge--game::before {
  background: var(--ember);
  box-shadow: 0 0 6px color-mix(in srgb, var(--ember) 90%, transparent);
}

/* Images that may not exist yet. */
.art {
  display: block;
  position: relative;
  background: radial-gradient(70% 70% at 50% 60%, color-mix(in srgb, var(--raised) 55%, transparent), transparent 75%), var(--ground);
  overflow: hidden;
}
.art img {
  display: block;
  width: 100%;
  height: auto;
}
.art__note {
  display: none;
}
.art.is-missing {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--raised) 35%, transparent) 14px 15px), var(--ground);
}
.art.is-missing.art--portrait {
  aspect-ratio: 4 / 5;
}
.art.is-missing.art--icon {
  aspect-ratio: 1;
}
.art.is-missing .art__note {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--f-util);
  font-size: 0.82rem;
  color: var(--muted);
  padding: 0.5rem;
  text-align: center;
}
.art.is-missing .art__note::before {
  /* An unlit coal. */
  content: '';
  width: 10px;
  height: 10px;
  border: 1px solid var(--frame);
  transform: rotate(45deg);
  opacity: 0.7;
}
.art--icon.is-missing .art__note {
  font-size: 0;
  gap: 0;
}

/* --- Section index ------------------------------------------------------------------------- */

.section-head {
  max-width: 48rem;
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
}
.section-head h1 {
  font-size: clamp(2.25rem, 7vw, 4.25rem);
}
.section-head__intro {
  margin: 1rem 0 0;
  font-size: clamp(1.15rem, 2.2vw, 1.35rem);
  line-height: 1.5;
  color: var(--text);
  max-width: 38ch;
}
.section-head__count {
  margin: 1.25rem 0 0;
  font-family: var(--f-util);
  font-size: 0.9rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums lining-nums;
  padding-top: 1rem;
  border-top: 1px solid var(--rule-soft);
  display: inline-block;
}
/* The section's painting, a wide band under its head. */
.section-art {
  margin: 0 0 clamp(2rem, 5vw, 3.25rem);
}
.section-art .art img {
  aspect-ratio: 21 / 8;
  object-fit: cover;
  object-position: 50% 45%;
}
.section-art .art.is-missing {
  display: none;
}
@media (max-width: 640px) {
  .section-art .art img {
    aspect-ratio: 16 / 9;
  }
}

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 1.25rem;
}
.cards > li {
  display: flex;
}
.card {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-decoration: none;
  background: var(--panel);
  border: 1px solid var(--line);
  transition: border-color 160ms ease;
}
.card:hover,
.card:focus-visible {
  border-color: var(--rule);
}
.card__art {
  aspect-ratio: 16 / 10;
  border-bottom: 1px solid var(--line);
}
.card__art.is-missing {
  aspect-ratio: 16 / 10;
  border: 0;
  border-bottom: 1px solid var(--line);
}
.card__art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0.86);
  transition: filter 220ms ease;
}
.card__art.art--panel img,
.card__art.art--screen img {
  object-fit: cover;
}
.card:hover .card__art img,
.card:focus-visible .card__art img {
  filter: brightness(1.05);
}
.card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 1rem 1.15rem 1.15rem;
  flex: 1;
}
.card__title {
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--text);
}
.card__summary {
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.card .badge {
  margin-top: auto;
}

.empty {
  max-width: 34rem;
  padding: 1.5rem;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
}

/* --- Article ------------------------------------------------------------------------------- */

.shell--article {
  display: grid;
  grid-template-columns: minmax(0, var(--measure)) 15rem;
  justify-content: center;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}
@media (max-width: 960px) {
  .shell--article {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}

.article__head {
  margin-bottom: 2.25rem;
}
.article__summary {
  margin: 1rem 0 0;
  font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.35rem);
  line-height: 1.45;
  color: var(--muted);
  max-width: 36ch;
}
.article__meta {
  margin: 1.25rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-soft);
}

.rail {
  position: sticky;
  top: 2rem;
  font-family: var(--f-util);
  font-size: 0.95rem;
  padding-top: 0.25rem;
}
.rail__title {
  margin: 0 0 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
  font-weight: 600;
}
.rail__title a {
  text-decoration: none;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--paper);
}
.rail ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rail li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.38rem 0 0.38rem 0.8rem;
  border-left: 1px solid var(--line);
  color: var(--muted);
  text-decoration: none;
  line-height: 1.3;
}
.rail li a:hover {
  color: var(--text);
}
.rail li a[aria-current] {
  color: var(--text);
  border-left-color: var(--ember);
}
.rail__dot {
  width: 5px;
  height: 5px;
  flex: none;
  margin-right: 1px; /* rotated, it is 7px wide: keep it inside the rail */
  background: color-mix(in srgb, var(--ember) 70%, transparent);
  transform: rotate(45deg);
}
@media (max-width: 960px) {
  .rail {
    position: static;
    margin-top: 3.5rem;
  }
}

.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-soft);
}
.pager__link {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  background: var(--panel);
  text-decoration: none;
  min-width: 0;
}
.pager__link:hover {
  border-color: var(--rule);
}
.pager__link--next {
  text-align: right;
}
.pager__dir {
  font-family: var(--f-util);
  font-size: 0.8rem;
  color: var(--muted);
}
.pager__title {
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* --- Prose --------------------------------------------------------------------------------- */

.prose {
  overflow-wrap: break-word;
}
.prose::after {
  content: '';
  display: table;
  clear: both;
}
.prose > :first-child {
  margin-top: 0;
}
.prose p,
.prose ul,
.prose ol {
  margin: 0 0 1.1em;
}
.prose h2 {
  font-family: var(--f-display);
  font-size: clamp(1.7rem, 3.6vw, 2.15rem);
  line-height: 1.12;
  color: var(--paper);
  margin: 2.6em 0 0.75em;
}
.prose h3 {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.45rem;
  line-height: 1.2;
  color: var(--paper);
  margin: 2em 0 0.5em;
}
.prose h4 {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
  margin: 1.6em 0 0.4em;
}
.prose a {
  text-decoration-line: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.prose a:hover {
  color: var(--ember);
  text-decoration-color: var(--ember);
}
.prose strong {
  font-weight: 700;
  color: var(--text);
}
.prose ul,
.prose ol {
  padding-left: 1.3em;
}
.prose li {
  margin: 0.3em 0;
}
.prose li::marker {
  color: var(--frame);
}
.prose ul > li::marker {
  content: '◆  ';
  font-size: 0.55em;
}
.prose code {
  font-family: var(--f-util);
  font-size: 0.9em;
  font-variant-numeric: tabular-nums lining-nums;
  padding: 0.08em 0.35em;
  background: var(--panel);
  border: 1px solid var(--line);
}
.prose pre {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 1rem;
  overflow-x: auto;
}
.prose pre code {
  border: 0;
  padding: 0;
}
.prose hr {
  border: 0;
  height: 1px;
  margin: 2.75rem 0;
  background: linear-gradient(90deg, var(--rule), transparent);
}

/* Flavour: one sentence, a concrete image, set apart like the line under a unique. */
.prose blockquote,
.flavour {
  margin: 2.25rem auto;
  padding: 0 1rem;
  max-width: 32rem;
  text-align: center;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.45;
  color: var(--muted);
}
.prose blockquote p {
  margin: 0 0 0.5em;
}
.prose blockquote p:last-child {
  margin-bottom: 0;
}
.prose blockquote::before,
.prose blockquote::after {
  content: '';
  display: block;
  width: 3.5rem;
  height: 1px;
  margin: 0 auto 1rem;
  background: var(--rule);
}
.prose blockquote::after {
  margin: 1rem auto 0;
}

/* Figures: each painting hangs on the dark ground inside a fine plate line, its caption below
   like a museum label. */
.figure,
.lead {
  margin: 2.25rem 0;
}
.figure .art,
.lead .art,
.section-art .art {
  border: 1px solid var(--rule);
  box-shadow: 0 0 0 5px var(--ground), 0 0 0 6px var(--rule-soft);
}
.figure figcaption,
.section-art figcaption {
  margin-top: 1rem;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--muted);
}
.lead {
  margin-top: 0;
}
@media (min-width: 640px) {
  .lead--portrait {
    float: right;
    width: min(16rem, 42%);
    margin: 0.3rem 0 1.25rem 2rem;
  }
  .lead--icon {
    float: right;
    width: 7.5rem;
    margin: 0.3rem 0 1rem 1.75rem;
  }
}
@media (max-width: 639px) {
  .lead--portrait {
    max-width: 18rem;
  }
  .lead--icon {
    width: 6rem;
  }
}

/* Tables */
.table-wrap {
  margin: 1.75rem 0 2rem;
  overflow-x: auto;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.97rem;
  line-height: 1.45;
  font-variant-numeric: tabular-nums lining-nums;
}
.table-wrap th {
  font-family: var(--f-util);
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--frame);
  text-align: left;
  padding: 0.7rem 0.85rem 0.6rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table-wrap td {
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid color-mix(in srgb, var(--raised) 70%, transparent);
  vertical-align: top;
}
.table-wrap tr:last-child td {
  border-bottom: 0;
}
.table-wrap td:first-child,
.table-wrap th:first-child {
  padding-left: 0;
}
.table-wrap td:first-child {
  color: var(--text);
  font-weight: 500;
}
.table-wrap tbody tr:hover td {
  background: color-mix(in srgb, var(--panel) 70%, transparent);
}

/* Item tooltips, after Path of Exile: header in the rarity colour, mods below, on a dark panel in
   a plate-line frame. */
.item {
  --rc: var(--r-normal);
  display: inline-block;
  vertical-align: top;
  width: min(22.5rem, 100%);
  margin: 0.5rem 1rem 1.5rem 0;
  background: var(--panel);
  border: 1px solid var(--rule);
  outline: 1px solid color-mix(in srgb, var(--ground) 100%, transparent);
  box-shadow: 0 0 0 3px var(--ground), 0 0 0 4px var(--rule-soft), 0 12px 32px color-mix(in srgb, var(--ground) 80%, transparent);
  text-align: center;
  font-size: 1rem;
  line-height: 1.4;
  font-variant-numeric: tabular-nums lining-nums;
}
.item[data-rarity='magic'] {
  --rc: var(--r-magic);
}
.item[data-rarity='rare'] {
  --rc: var(--r-rare);
}
.item[data-rarity='unique'] {
  --rc: var(--r-unique);
}
.prose .item h4,
.item h4 {
  margin: 0;
  padding: 0.7rem 1rem 0.55rem;
  font-family: var(--f-display);
  font-size: 1.12rem;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: var(--rc);
  background: linear-gradient(color-mix(in srgb, var(--rc) 18%, var(--panel)), color-mix(in srgb, var(--rc) 7%, var(--panel)));
  border-bottom: 1px solid color-mix(in srgb, var(--rc) 45%, transparent);
}
.item h4:has(+ .base) {
  padding-bottom: 0.15rem;
  border-bottom: 0;
}
.prose .item .base,
.item .base {
  margin: 0;
  padding: 0.1rem 1rem 0.6rem;
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.35;
  color: var(--rc);
  background: color-mix(in srgb, var(--rc) 7%, var(--panel));
  border-bottom: 1px solid color-mix(in srgb, var(--rc) 45%, transparent);
}
.prose .item ul,
.item ul {
  list-style: none;
  margin: 0;
  padding: 0.75rem 1rem;
}
.item ul + ul,
.item p + ul:not(:first-of-type) {
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rc) 50%, transparent), transparent) 1;
}
.prose .item li,
.item li {
  margin: 0.15em 0;
  color: var(--r-magic);
}
.prose .item li::marker {
  content: none;
}
.item ul:first-of-type:not(:last-of-type) li {
  color: var(--text);
}
.item ul:only-of-type li {
  color: var(--r-magic);
}
.item .flavour,
.prose .item .flavour {
  margin: 0;
  max-width: none;
  padding: 0.7rem 1.1rem 0.85rem;
  font-size: 1rem;
  font-style: italic;
  color: var(--r-unique);
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rc) 50%, transparent), transparent) 1;
}
.item > :last-child {
  margin-bottom: 0;
}

/* --- Home ---------------------------------------------------------------------------------- */

/* The home is a pitch: a hero on one painting, what it is to play, a tease of the world in
   questions, the ways in, and where the build stands. Each band is the width of the site. */
.band {
  max-width: 80rem;
  margin: 0 auto;
  padding: clamp(3.5rem, 9vw, 6.5rem) var(--gutter) 0;
}
.band__head {
  max-width: 44rem;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.band__head p {
  margin: 0.6rem 0 0;
  color: var(--muted);
}
.home h2 {
  font-family: var(--f-display);
  font-size: clamp(2.1rem, 4.6vw, 3.1rem);
  line-height: 1.06;
  color: var(--paper);
}
.home h3 {
  font-family: var(--f-display);
  font-size: 1.6rem;
  line-height: 1.15;
  color: var(--paper);
  margin-bottom: 0.6rem;
}
.home blockquote {
  margin: 0.7rem 0 0;
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.2rem, 2.4vw, 1.4rem);
  line-height: 1.4;
  color: var(--muted);
}
.home blockquote p {
  margin: 0;
}
.band__link {
  margin: 2rem 0 0;
  font-family: var(--f-util);
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--muted);
}
.home a {
  text-decoration-color: var(--rule);
  text-underline-offset: 0.22em;
}
.home a:hover {
  color: var(--ember);
  text-decoration-color: var(--ember);
}

/* The hero: the painting fills the band, and the words sit on its dark side. */
.hero {
  position: relative;
  min-height: min(88vh, 54rem);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--ground);
}
.hero__art {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ground) 94%, transparent), color-mix(in srgb, var(--ground) 80%, transparent) 34%, transparent 62%),
    linear-gradient(transparent 70%, var(--ground));
}
.hero__embers {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
.hero__inner {
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: clamp(4rem, 12vh, 7rem) var(--gutter) clamp(3rem, 8vh, 5rem);
}
.hero__inner > * {
  max-width: 34rem;
}
.hero__word {
  margin: 0 0 1.75rem;
  max-width: 27rem;
  line-height: 0;
}
.hero__word img {
  width: 100%;
  height: auto;
}
.hero__hook {
  margin: 0;
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.4rem, 2.7vw, 1.8rem);
  line-height: 1.4;
  color: var(--paper);
}
.hero__sub {
  margin: 1rem 0 0;
  color: var(--muted);
}
.hero__actions {
  margin: 2rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.hero__status {
  margin: 2.5rem 0 0;
  font-family: var(--f-util);
  font-size: 0.88rem;
  color: var(--muted);
}
@media (max-width: 760px) {
  /* On a phone the painting comes first, whole, and the words follow below it. */
  .hero {
    display: block;
    min-height: 0;
  }
  .hero__art {
    position: relative;
    inset: auto;
    z-index: 0;
  }
  .hero__embers {
    z-index: 1;
  }
  .hero__art img {
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .hero::before {
    display: none;
  }
  .hero__art img {
    -webkit-mask-image: linear-gradient(#000 55%, transparent);
    mask-image: linear-gradient(#000 55%, transparent);
  }
  .hero__inner {
    position: relative;
    z-index: 2;
    margin-top: -5rem;
    padding-top: 0;
  }
}

/* Buttons: a plate line, or ember for the one thing to do. */
.button {
  display: inline-block;
  padding: 0.7rem 1.35rem 0.65rem;
  font-family: var(--f-display);
  font-size: 1.12rem;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid var(--paper);
  color: var(--paper);
  background: color-mix(in srgb, var(--ground) 55%, transparent);
  transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}
.home .button:hover {
  color: var(--ember);
  border-color: var(--ember);
}
.button--fire {
  background: var(--ember);
  border-color: var(--ember);
  color: var(--ground);
}
.home .button--fire:hover {
  background: var(--cinder);
  border-color: var(--cinder);
  color: var(--ground);
}

/* A painting the home sets in its own layout, with a museum-label caption. */
.plate {
  margin: 0;
}
.plate .art {
  border: 1px solid var(--rule);
  box-shadow: 0 0 0 5px var(--ground), 0 0 0 6px var(--rule-soft);
}
.plate .art img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.plate figcaption {
  margin-top: 1rem;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--muted);
}

/* What it is to play: four promises, the first with the key art. */
.promise-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
}
.promise {
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule-soft);
}
.promise p {
  margin: 0 0 0.9rem;
}
.promise--wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  padding-top: 0;
  border-top: 0;
}
.promise__fact {
  font-family: var(--f-util);
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--muted);
  font-variant-numeric: tabular-nums lining-nums;
}
.promise__link {
  font-family: var(--f-util);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--muted);
}
@media (max-width: 900px) {
  .promise-grid,
  .promise--wide {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The way up: the world, as questions. */
.tease__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 760px) {
  .tease__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Ways in: one painting and one line each. */
.ways__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr));
  gap: clamp(1.5rem, 3vw, 2rem) clamp(1.25rem, 2.5vw, 1.75rem);
}
@media (min-width: 1100px) {
  .ways__list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.way {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
}
.way__art {
  border: 1px solid var(--rule);
  box-shadow: 0 0 0 5px var(--ground), 0 0 0 6px var(--rule-soft);
  margin-bottom: 1.1rem;
}
.way__art img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: brightness(0.9);
  transition: filter 220ms ease;
}
.way:hover .way__art img,
.way:focus-visible .way__art img {
  filter: none;
}
.way__title {
  font-family: var(--f-display);
  font-size: 1.45rem;
  line-height: 1.15;
  color: var(--paper);
}
.way:hover .way__title {
  color: var(--ember);
}
.way__line {
  margin-top: 0.3rem;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--muted);
}
@media (max-width: 560px) {
  .ways__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .way__title {
    font-size: 1.2rem;
  }
  .way__line {
    font-size: 0.92rem;
  }
}

/* Real renders from the build, labelled as such: proof of the tech, never hero art. */
.screens {
  margin: 2.5rem 0 0;
}
.screens__label {
  margin: 0 0 0.75rem;
  font-family: var(--f-util);
  font-size: 0.88rem;
  color: var(--muted);
}
.prose .screens__strip,
.screens__strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
}
.prose .screens__strip li {
  margin: 0;
}
.prose .screens__strip li::marker {
  content: none;
}
.screens--compact .screens__strip {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.5rem;
}
@media (max-width: 900px) {
  .screens--compact .screens__strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.screens figure {
  margin: 0;
}
.screens a {
  display: block;
}
.screens .art {
  border: 1px solid var(--line);
  aspect-ratio: 16 / 9;
}
.screens .art img {
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85);
}
.screens a:hover .art,
.screens a:focus-visible .art {
  border-color: var(--rule);
}
.screens figcaption {
  margin-top: 0.5rem;
  font-family: var(--f-util);
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--muted);
}

/* Where it stands: lit coals and unlit ones. */
.standing {
  padding-bottom: clamp(3.5rem, 9vw, 6rem);
}
.standing__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
}
@media (max-width: 760px) {
  .standing__cols {
    grid-template-columns: minmax(0, 1fr);
  }
}
.standing h3 {
  font-size: 1.35rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
}
.coals {
  list-style: none;
  margin: 0;
  padding: 0;
}
.coals li {
  position: relative;
  padding: 0.75rem 0 0.75rem 1.6rem;
  border-bottom: 1px solid var(--line);
  line-height: 1.5;
}
.coals li::before {
  content: '';
  position: absolute;
  left: 0.2rem;
  top: 1.25rem;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  border: 1px solid var(--raised);
}
.coals--lit li::before {
  border-color: var(--ember);
  background: var(--ember);
  box-shadow: 0 0 8px color-mix(in srgb, var(--ember) 80%, transparent);
}
.coals--unlit li {
  color: var(--muted);
}
.coals--unlit li::before {
  border-color: var(--muted);
  opacity: 0.6;
}
.coals strong {
  color: var(--text);
  font-weight: 700;
}
.coals .num {
  font-family: var(--f-util);
  font-size: 0.92em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--muted);
}
.standing__note {
  margin: 2.5rem 0 0;
  max-width: 44rem;
  color: var(--muted);
  font-size: 0.98rem;
}

/* --- Art Direction pages: swatches, strata, specimens ------------------------------------- */

.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr));
  gap: 1px;
  padding: 1px;
  margin: 1.75rem 0 2.25rem;
}
.swatches--four {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
}
.swatch {
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--line);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.swatch__chip {
  height: 4.75rem;
  background: var(--c);
  border-bottom: 1px solid var(--line);
}
.swatch__chip--glow {
  box-shadow: inset 0 -18px 30px -18px color-mix(in srgb, var(--spark) 40%, transparent);
}
.swatch__text {
  padding: 0.65rem 0.75rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.swatch__name {
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}
.swatch__hex {
  font-family: var(--f-util);
  font-size: 0.86rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums lining-nums;
}
.swatch__use {
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--muted);
}
.swatch__sample {
  font-family: var(--f-display);
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  color: var(--c);
  padding: 1.35rem 0.75rem 1.2rem;
  border-bottom: 1px solid var(--line);
  background: var(--ground);
  line-height: 1.2;
  height: 5.5rem;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.ratio {
  display: flex;
  height: 2.5rem;
  margin: 1.5rem 0 0.6rem;
  border: 1px solid var(--line);
}
.ratio span {
  display: block;
}
.ratio__caption {
  font-family: var(--f-util);
  font-size: 0.86rem;
  color: var(--muted);
  margin: 0 0 2rem;
}

.prose .strata-panels,
.strata-panels {
  list-style: none;
  margin: 1.75rem 0 2.5rem;
  padding: 0;
  display: grid;
  gap: 1.75rem;
}
.prose .strata-panels li {
  margin: 0;
}
.prose .strata-panels li::marker {
  content: none;
}
.stratum__panel {
  aspect-ratio: 16 / 6;
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.stratum__panel::after {
  /* Vignette to black: every frame dissolves into the dark at its edges. */
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 110% at 50% 50%, transparent 55%, color-mix(in srgb, var(--ground) 85%, transparent));
}
.stratum__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.25rem 1.5rem;
  padding-top: 0.75rem;
  align-items: start;
}
.stratum__name {
  font-weight: 700;
  color: var(--text);
}
.stratum__mood {
  grid-column: 1;
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.5;
}
.stratum__chips {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  gap: 4px;
}
.stratum__chips span {
  width: 1.6rem;
  height: 1.6rem;
  background: var(--c);
  border: 1px solid var(--line);
}
@media (max-width: 520px) {
  .stratum__panel {
    aspect-ratio: 16 / 8;
  }
  .stratum__body {
    grid-template-columns: minmax(0, 1fr);
  }
  .stratum__chips {
    grid-column: 1;
    grid-row: auto;
    margin-top: 0.35rem;
  }
}

.stratum--hearthold .stratum__panel {
  background:
    radial-gradient(14% 30% at 30% 100%, color-mix(in srgb, var(--ember) 45%, transparent), transparent 70%),
    radial-gradient(14% 30% at 68% 100%, color-mix(in srgb, var(--frame) 40%, transparent), transparent 70%),
    radial-gradient(60% 70% at 50% 110%, color-mix(in srgb, var(--frame) 22%, transparent), transparent 75%),
    repeating-linear-gradient(90deg, transparent 0 88px, color-mix(in srgb, var(--s-iron) 40%, transparent) 88px 89px),
    linear-gradient(var(--panel), var(--s-iron));
}
.stratum--sunken-reach .stratum__panel {
  background:
    linear-gradient(100deg, transparent 22%, color-mix(in srgb, var(--tide) 22%, transparent) 27%, transparent 33%),
    linear-gradient(96deg, transparent 55%, color-mix(in srgb, var(--rime) 14%, transparent) 59%, transparent 63%),
    radial-gradient(40% 18% at 45% 92%, color-mix(in srgb, var(--text) 12%, transparent), transparent 70%),
    linear-gradient(var(--s-slate), color-mix(in srgb, var(--s-verdigris) 45%, var(--s-slate)) 70%, var(--drowned));
}
.stratum--gloamroot .stratum__panel {
  background:
    radial-gradient(3% 7% at 18% 62%, color-mix(in srgb, var(--s-amber) 85%, transparent), transparent),
    radial-gradient(2% 5% at 26% 70%, color-mix(in srgb, var(--s-amber) 70%, transparent), transparent),
    radial-gradient(4% 9% at 64% 40%, color-mix(in srgb, var(--s-amber) 65%, transparent), transparent),
    radial-gradient(2.5% 6% at 81% 74%, color-mix(in srgb, var(--text) 55%, transparent), transparent),
    radial-gradient(30% 60% at 64% 40%, color-mix(in srgb, var(--gloom) 45%, transparent), transparent 70%),
    linear-gradient(var(--s-violet), color-mix(in srgb, var(--s-violet) 50%, var(--ground)));
}
.stratum--cinderworks .stratum__panel {
  background:
    radial-gradient(70% 30% at 50% 100%, color-mix(in srgb, var(--s-magma) 75%, transparent), transparent 70%),
    linear-gradient(176deg, transparent 72%, color-mix(in srgb, var(--s-magma) 55%, transparent) 78%, color-mix(in srgb, var(--gilded) 40%, transparent) 80%, transparent 84%),
    radial-gradient(10% 50% at 80% 30%, color-mix(in srgb, var(--frame) 25%, transparent), transparent 70%),
    linear-gradient(var(--s-basalt), color-mix(in srgb, var(--s-basalt) 70%, var(--cinder)));
}
.stratum--heartfire .stratum__panel {
  background:
    radial-gradient(50% 80% at 50% 55%, var(--spark), color-mix(in srgb, var(--spark) 70%, var(--gilded)) 45%, color-mix(in srgb, var(--gilded) 75%, var(--ember)) 85%),
    var(--gilded);
}
.stratum--heartfire .stratum__panel::after {
  background: radial-gradient(120% 110% at 50% 50%, transparent 70%, color-mix(in srgb, var(--ember) 40%, transparent));
}
.stratum--the-unlit .stratum__panel {
  background:
    radial-gradient(0.4% 1% at 22% 38%, var(--s-ether), transparent),
    radial-gradient(0.3% 0.8% at 47% 64%, var(--s-ether), transparent),
    radial-gradient(0.35% 0.9% at 71% 29%, var(--s-ether), transparent),
    radial-gradient(0.25% 0.7% at 86% 71%, var(--s-ether), transparent),
    radial-gradient(0.3% 0.8% at 9% 80%, var(--s-ether), transparent),
    var(--s-void);
}

.specimen {
  border: 1px solid var(--line);
  background: var(--panel);
  margin: 1.5rem 0 2rem;
}
.specimen > div {
  padding: 1.25rem 1.25rem 1.1rem;
  border-bottom: 1px solid var(--line);
}
.specimen > div:last-child {
  border-bottom: 0;
}
.specimen__role {
  display: block;
  font-family: var(--f-util);
  font-size: 0.84rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.specimen__display {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: var(--text);
}
/* The game's title face, shown beside the site's (art/visual-identity.html); it ships with the client. */
@font-face {
  font-family: 'Castoro Titling';
  src: url('game/fonts/CastoroTitling-Regular.ttf') format('truetype');
  font-display: swap;
}
.specimen__display--castoro {
  font-family: 'Castoro Titling', Georgia, serif;
  letter-spacing: 0.04em;
}
.specimen__body {
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--text);
}
.specimen__util {
  font-family: var(--f-util);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text);
}
.specimen__util span {
  color: var(--ember);
}

.families {
  list-style: none;
  padding: 0 !important;
  margin: 1.75rem 0 2.5rem !important;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr));
  gap: 1.25rem;
}
.prose .families li {
  margin: 0;
}
.prose .families li::marker {
  content: none;
}
.families a {
  display: block;
  text-decoration: none;
  border: 1px solid var(--line);
  background: var(--panel);
}
.families a:hover {
  border-color: var(--rule);
}
.families .art {
  border-bottom: 1px solid var(--line);
}
.families .art.is-missing {
  border: 0;
  border-bottom: 1px solid var(--line);
}
.families__text {
  display: block;
  padding: 0.7rem 0.85rem 0.85rem;
}
.families__name {
  display: block;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.families__shape {
  display: block;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--muted);
  margin-top: 0.2rem;
}
.families__el {
  display: inline-block;
  margin-top: 0.45rem;
  font-family: var(--f-util);
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--c) 78%, var(--text));
}

/* --- Colophon ------------------------------------------------------------------------------ */

.colophon {
  border-top: 1px solid var(--line);
  background: var(--ground);
}
.colophon__inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 2.5rem var(--gutter) 3rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.75rem 3rem;
  font-size: 0.95rem;
  color: var(--muted);
}
.colophon p {
  margin: 0;
  max-width: 34rem;
}
.colophon__mark {
  font-family: var(--f-caps);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  color: var(--paper);
}
.colophon__mark span {
  font-family: var(--f-body);
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
}
.colophon__nav {
  grid-column: 2;
  grid-row: 1 / span 2;
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 2rem;
  font-family: var(--f-util);
}
.colophon__nav a {
  text-decoration: none;
  display: inline-block;
  padding: 0.2rem 0;
}
.colophon__nav a:hover {
  color: var(--text);
}
@media (max-width: 720px) {
  .colophon__inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .colophon__nav {
    grid-column: 1;
    grid-row: auto;
    margin-top: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* --- Paintings ----------------------------------------------------------------------------- */

/* Paintings hang in the print room: framed by a plate line, captioned below. */
.art--painting {
  background: var(--ground);
}
.card__art.art--painting img {
  object-fit: cover;
  object-position: 50% 40%;
}
.figure--portrait {
  max-width: 18rem;
}
@media (min-width: 640px) {
  .figure--portrait {
    float: right;
    width: min(15rem, 42%);
    margin: 0.3rem 0 1.25rem 2rem;
  }
  .figure--icon {
    float: right;
    width: 7.5rem;
    margin: 0.3rem 0 1rem 1.75rem;
  }
}
.prose h2 {
  clear: both;
}

/* Implicit modifiers sit above the explicit ones, split by a rule. */
.prose .item li.implicit,
.item li.implicit {
  color: var(--text);
}
.item li.implicit + li:not(.implicit) {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rc) 50%, transparent), transparent) 1;
}

/* --- v0.2: the journey ---------------------------------------------------------------------- */

/* Each act tints what belongs to it: warm daylight for acts 1-3, cold for the coast, bleached for
   the Drawn Sea, nearly nothing underground, white-gold at the Heartfire, void below. The site
   stays dark; the tint is a wash, never a background colour. */
.act-tint--1 { --tint: color-mix(in srgb, var(--a-wheat) 17%, transparent); --tint2: color-mix(in srgb, var(--a-meadow) 12%, transparent); }
.act-tint--2 { --tint: color-mix(in srgb, var(--a-moss) 20%, transparent); --tint2: color-mix(in srgb, var(--a-wheat) 8%, transparent); }
.act-tint--3 { --tint: color-mix(in srgb, var(--a-drygrass) 13%, transparent); --tint2: color-mix(in srgb, var(--a-snow) 6%, transparent); }
.act-tint--4 { --tint: color-mix(in srgb, var(--s-verdigris) 14%, transparent); --tint2: color-mix(in srgb, var(--s-slate) 20%, transparent); }
.act-tint--5 { --tint: color-mix(in srgb, var(--a-salt) 11%, transparent); --tint2: color-mix(in srgb, var(--a-turquoise) 7%, transparent); }
.act-tint--6 { --tint: color-mix(in srgb, var(--s-magma) 5%, transparent); --tint2: transparent; }
.act-tint--7 { --tint: color-mix(in srgb, var(--gilded) 15%, transparent); --tint2: color-mix(in srgb, var(--spark) 6%, transparent); }
.act-tint--8 { --tint: color-mix(in srgb, var(--s-void) 90%, transparent); --tint2: transparent; }

/* The daylight and strangeness meters. */
.curve {
  display: grid;
  gap: 0.3rem;
  font-family: var(--f-util);
  font-size: 0.8rem;
  line-height: 1.2;
  color: var(--muted);
}
.curve__row {
  display: grid;
  grid-template-columns: 5.9rem 4.5rem auto;
  align-items: center;
  gap: 0.6rem;
}
.curve__bar {
  position: relative;
  height: 5px;
  background: color-mix(in srgb, var(--raised) 80%, transparent);
  overflow: hidden;
}
.curve__bar > span {
  display: block;
  height: 100%;
}
.curve__bar--sun > span {
  background: linear-gradient(90deg, var(--a-wheat), var(--spark));
}
.curve__bar--glare > span {
  background: linear-gradient(90deg, var(--a-sand), var(--a-salt));
}
.curve__bar--fire > span {
  background: linear-gradient(90deg, var(--ember), var(--gilded), var(--spark));
  box-shadow: 0 0 8px color-mix(in srgb, var(--ember) 70%, transparent);
}
.curve__bar--none > span {
  background: var(--ember);
}
.curve__bar--void::after {
  /* Light that illuminates nothing: one speck of ether in an empty meter. */
  content: '';
  position: absolute;
  left: 30%;
  top: 1px;
  width: 3px;
  height: 3px;
  background: var(--s-ether);
}
.curve__bar--strange > span {
  background: linear-gradient(90deg, var(--gloom), var(--s-ether));
}
.curve__value {
  white-space: nowrap;
}
.curve--compact .curve__row {
  grid-template-columns: 4.6rem 4.5rem;
}
.curve--compact .curve__value {
  display: none;
}

/* Home: the act list. */
.acts {
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.acts__row {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr) 22rem;
  gap: 0.6rem 1.5rem;
  align-items: center;
  padding: 0.85rem 0.75rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, var(--tint), var(--tint2) 55%, transparent);
}
.acts__thumb {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
}
.acts__thumb.is-missing {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--tint), var(--tint2)), var(--ground);
}
.acts__thumb.is-missing .art__note {
  font-size: 0;
  gap: 0;
}
.acts__thumb img {
  height: 100%;
  object-fit: cover;
}
.acts__text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.acts__num {
  font-family: var(--f-util);
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--frame);
}
.acts__name {
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  text-decoration: none;
}
a.acts__name:hover {
  color: var(--ember);
}
.acts__line {
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.45;
}
.acts__hub {
  font-family: var(--f-util);
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 0.15rem;
}
.acts__hub a {
  color: var(--text);
  text-decoration-color: var(--rule);
  text-underline-offset: 0.2em;
}
.acts__hub a:hover {
  color: var(--ember);
}
@media (max-width: 960px) {
  .acts__row {
    grid-template-columns: 7rem minmax(0, 1fr);
    align-items: start;
  }
  .acts__row .curve {
    grid-column: 2;
  }
}
@media (max-width: 520px) {
  .acts__row {
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: 0.5rem 0.9rem;
    padding: 0.8rem 0.5rem;
  }
  .acts__row .curve__row {
    grid-template-columns: 4.9rem 3rem minmax(0, 1fr);
    gap: 0.45rem;
  }
  .curve__value {
    white-space: normal;
  }
}

/* Promise with art: the hordes promise carries the deep-register combat painting. */
.promise--wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.promise__text {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}
/* Journey cards and pages. */
.card__act {
  font-family: var(--f-util);
  font-weight: 500;
  font-size: 0.82rem;
  color: var(--frame);
}
.card.act-tint .card__body {
  background: linear-gradient(var(--tint), transparent 80%);
}
.act-page.act-tint {
  background: radial-gradient(110% 560px at 30% 0, var(--tint), var(--tint2) 45%, transparent 80%) no-repeat;
}
.article__act {
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.75rem;
}
.article__actname {
  font-family: var(--f-util);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--frame);
}

/* Two registers side by side (visual identity). */
.registers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 1.75rem;
  margin: 1.75rem 0 2rem;
}
.registers figure {
  margin: 0;
}
.registers .art {
  border: 1px solid var(--rule);
  box-shadow: 0 0 0 5px var(--ground), 0 0 0 6px var(--rule-soft);
  aspect-ratio: 16 / 9;
}
.registers .art img {
  height: 100%;
  object-fit: cover;
}
.registers figcaption {
  margin-top: 1rem;
  font-size: 0.98rem;
  line-height: 1.4;
  color: var(--muted);
}
.registers figcaption b {
  color: var(--text);
  font-weight: 600;
}
@media (max-width: 560px) {
  .registers {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Act light studies (palette page). */
.stratum--the-vale .stratum__panel {
  background:
    radial-gradient(30% 60% at 70% 20%, color-mix(in srgb, var(--spark) 55%, transparent), transparent 70%),
    linear-gradient(175deg, transparent 52%, color-mix(in srgb, var(--a-meadow) 90%, var(--a-wheat)) 56%, var(--a-meadow) 78%, color-mix(in srgb, var(--a-meadow) 60%, var(--ground))),
    linear-gradient(90deg, color-mix(in srgb, var(--muted) 45%, transparent), transparent 22%),
    linear-gradient(var(--a-sky), color-mix(in srgb, var(--a-sky) 50%, var(--a-wheat)) 52%);
}
.stratum--harrowwood .stratum__panel {
  background:
    linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--a-wheat) 40%, transparent) 36%, transparent 42%),
    radial-gradient(3% 7% at 22% 70%, var(--ember), transparent),
    repeating-linear-gradient(90deg, transparent 0 60px, color-mix(in srgb, var(--a-bark) 90%, transparent) 60px 84px),
    linear-gradient(var(--a-moss), color-mix(in srgb, var(--a-moss) 50%, var(--s-violet)) 75%, var(--s-violet));
}
.stratum--barrow-moors .stratum__panel {
  background:
    radial-gradient(6% 16% at 30% 68%, color-mix(in srgb, var(--a-heather) 70%, transparent), transparent 70%),
    radial-gradient(9% 18% at 62% 66%, color-mix(in srgb, var(--a-heather) 60%, transparent), transparent 70%),
    linear-gradient(176deg, transparent 50%, var(--a-drygrass) 55%, color-mix(in srgb, var(--a-drygrass) 60%, var(--a-heather))),
    linear-gradient(90deg, transparent 70%, color-mix(in srgb, var(--a-snow) 70%, transparent)),
    linear-gradient(color-mix(in srgb, var(--a-sky) 70%, var(--muted)), color-mix(in srgb, var(--a-snow) 60%, var(--a-sky)) 50%);
}
.stratum--drowned-coast .stratum__panel {
  background:
    linear-gradient(100deg, transparent 22%, color-mix(in srgb, var(--tide) 22%, transparent) 27%, transparent 33%),
    repeating-linear-gradient(90deg, transparent 0 140px, color-mix(in srgb, var(--s-slate) 90%, var(--ground)) 140px 150px),
    linear-gradient(var(--s-slate), color-mix(in srgb, var(--s-verdigris) 45%, var(--s-slate)) 70%, var(--drowned));
}
.stratum--drawn-sea .stratum__panel {
  background:
    radial-gradient(20% 30% at 72% 22%, color-mix(in srgb, var(--a-salt) 85%, var(--spark)), transparent 70%),
    linear-gradient(178deg, transparent 54%, var(--a-sand) 56%, var(--a-salt)),
    radial-gradient(40% 20% at 40% 80%, color-mix(in srgb, var(--a-turquoise) 30%, transparent), transparent 70%),
    linear-gradient(var(--a-turquoise), color-mix(in srgb, var(--a-turquoise) 40%, var(--a-salt)) 52%);
}
.stratum--underhalls .stratum__panel {
  background:
    radial-gradient(12% 30% at 50% 70%, color-mix(in srgb, var(--ember) 55%, transparent), transparent 70%),
    radial-gradient(70% 30% at 85% 100%, color-mix(in srgb, var(--s-magma) 55%, transparent), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 110px, color-mix(in srgb, var(--raised) 70%, transparent) 110px 130px),
    var(--s-basalt);
}
.stratum--unlit .stratum__panel {
  background:
    radial-gradient(0.4% 1% at 40% 42%, var(--s-ether), transparent),
    radial-gradient(0.4% 1% at 60% 42%, var(--s-ether), transparent),
    radial-gradient(0.3% 0.8% at 22% 70%, var(--s-ether), transparent),
    radial-gradient(0.3% 0.8% at 81% 28%, var(--s-ether), transparent),
    var(--s-void);
}

/* Lightbox (assets/lightbox.js): any painting or figure opens full size. */
img.is-zoomable { cursor: zoom-in; }
body.lightbox-open { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: grid; grid-template-rows: 1fr auto; place-items: center;
  padding: 16px 16px 0;
  background: color-mix(in srgb, #050507 94%, transparent);
  cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox__img { max-width: 100%; max-height: calc(100vh - 72px); object-fit: contain; box-shadow: 0 0 0 1px var(--rule-soft); }
.lightbox__bar {
  display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap;
  width: 100%; margin: 0; padding: 12px 0; color: var(--text); font-size: 0.9rem; cursor: default;
}
.lightbox__cap { max-width: 70ch; text-align: center; }
.lightbox__file { color: var(--frame); white-space: nowrap; }
.lightbox__close, .lightbox__nav {
  border: 1px solid var(--rule); background: var(--panel); color: var(--frame);
  font: inherit; line-height: 1; cursor: pointer;
}
.lightbox__close { padding: 4px 10px; font-size: 1.2rem; }
.lightbox__nav { position: fixed; top: 50%; translate: 0 -50%; width: 44px; height: 64px; font-size: 2rem; }
.lightbox__nav--prev { left: 16px; }
.lightbox__nav--next { right: 16px; }
.lightbox--single .lightbox__nav { display: none; }
@media (max-width: 640px) { .lightbox__nav { top: auto; bottom: 64px; translate: none; } }

/* www: what this site adds to the concept wiki's stylesheet (site.css): three statuses,
   proposals, search, the three-act journey, lore inserts, and the generated wiki's components,
   all in the same ember-noir tokens. */

/* --- Statuses ------------------------------------------------------------------------------ */

.badge--in-game {
  color: var(--ember);
  border-color: color-mix(in srgb, var(--ember) 45%, transparent);
}
.badge--in-game::before {
  background: var(--ember);
  box-shadow: 0 0 6px color-mix(in srgb, var(--ember) 90%, transparent);
}
.badge--decided {
  color: var(--frame);
  border-color: color-mix(in srgb, var(--frame) 45%, transparent);
}
.badge--decided::before {
  background: color-mix(in srgb, var(--frame) 60%, transparent);
}
.badge--concept {
  border-style: dashed;
}

/* Invented copy inside a decided page: a dashed gold edge, labelled. */
.proposal {
  margin: 1.5rem 0 1.75rem;
  padding: 0.9rem 1.1rem 0.2rem 1.25rem;
  border-left: 2px dashed color-mix(in srgb, var(--gilded) 70%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--gilded) 6%, transparent), transparent 70%);
}
.prose .proposal__tag,
.proposal__tag {
  margin: 0 0 0.5rem;
  font-family: var(--f-util);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gilded);
}

/* --- Masthead search ----------------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.search {
  position: relative;
  font-family: var(--f-util);
}
.search__icon {
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.search input {
  width: 10rem;
  padding: 0.4rem 0.7rem 0.4rem 2.1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
}
.search input::placeholder {
  color: var(--muted);
}
.search input:focus {
  border-color: var(--rule);
  outline: none;
}
.search-results {
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  z-index: 20;
  width: min(24rem, 90vw);
  margin: 0;
  padding: 0.3rem 0;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--rule);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--ground) 85%, transparent);
}
.search-results a {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0.8rem;
  color: var(--text);
  text-decoration: none;
}
.search-results [aria-selected='true'] a,
.search-results a:hover {
  background: color-mix(in srgb, var(--ember) 14%, transparent);
}
.sr-kind {
  color: var(--muted);
  font-size: 0.85rem;
}
.sr-empty {
  padding: 0.4rem 0.8rem;
  color: var(--muted);
}
@media (max-width: 1280px) {
  .search input {
    width: 9rem;
  }
}
@media (max-width: 960px) {
  .search {
    flex: 1;
  }
  .search input {
    width: 100%;
  }
}
/* Phones: the brand and the Sections menu on the first line, the tools and search under them. */
@media (max-width: 600px) {
  .masthead__inner {
    flex-wrap: wrap;
    row-gap: 0.4rem;
  }
  .masthead__inner::after {
    content: '';
    order: 2;
    flex-basis: 100%;
  }
  .tools {
    order: 3;
    margin: 0 0 0.7rem;
  }
  .search {
    order: 4;
    margin: 0 0 0.7rem;
  }
}

.colophon__agents {
  font-family: var(--f-util);
  font-size: 0.9rem;
}

/* --- The journey: three acts, each a band of regions ---------------------------------------- */

.acts__act {
  margin: 0;
  border-bottom: 1px solid var(--rule-soft);
}
.acts__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
  padding: 1.4rem 0.75rem 0.6rem;
  background: linear-gradient(90deg, var(--tint), transparent 70%);
}
.acts__head .acts__num {
  font-size: 0.85rem;
}
.acts__actname {
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  letter-spacing: 0.03em;
  color: var(--text);
}
.acts__actline {
  flex-basis: 100%;
  color: var(--muted);
  font-style: italic;
}
.acts__head .acts__hub {
  flex-basis: 100%;
}
.acts__regions {
  list-style: none;
  margin: 0;
  padding: 0 0 0 clamp(0rem, 3vw, 2rem);
}
.acts__regions .acts__row:last-child {
  border-bottom: 0;
}

/* --- Lore inserted into generated wiki pages ----------------------------------------------- */

.lore {
  margin: 2rem 0 2.5rem;
  padding: 1.25rem 0 0.25rem;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.lore--with-art {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.lore__art {
  border: 1px solid var(--line);
}
.lore__art.art--icon {
  max-width: 7rem;
}
.prose .lore__tag,
.lore__tag {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.6rem;
  font-family: var(--f-util);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--frame);
}
.lore__tag .badge {
  text-transform: none;
  letter-spacing: 0.02em;
}
@media (max-width: 620px) {
  .lore--with-art {
    grid-template-columns: minmax(0, 1fr);
  }
  .lore__art {
    max-width: 16rem;
  }
}

/* --- The generated wiki -------------------------------------------------------------------- */

/* Three columns: the wiki's index, the page, the page's contents. The contents go first when the
   screen narrows (the headings are a scroll away), then the index folds above the page. */
.shell--wiki {
  max-width: 88rem;
  display: grid;
  grid-template-columns: 13.5rem minmax(0, 50rem) 12.5rem;
  justify-content: center;
  gap: clamp(2rem, 3.5vw, 3.5rem);
  align-items: start;
}
.shell--wiki .rail {
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  scrollbar-width: thin;
}
.rail--toc li a {
  font-size: 0.9rem;
}
.rail--toc li a[aria-current] {
  color: var(--text);
  border-left-color: var(--ember);
}
@media (max-width: 1240px) {
  .shell--wiki {
    grid-template-columns: 13.5rem minmax(0, 1fr);
  }
  .rail--toc {
    display: none;
  }
}
@media (max-width: 960px) {
  .shell--wiki {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .shell--wiki .rail--wiki {
    position: static;
    max-height: none;
    margin: 0 0 1.75rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--line);
    background: var(--panel);
  }
  .rail--wiki details:not([open]) .rail__title {
    margin: 0;
    padding: 0;
    border: 0;
  }
  .rail--wiki summary::after {
    content: ' ▾';
    color: var(--muted);
  }
}
.wiki h1 {
  margin-top: 0.25rem;
}
.wiki h1.with-swatch::before {
  content: '';
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-right: 0.35em;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0.6em var(--c);
  vertical-align: 0.08em;
}
.article__meta--wiki {
  margin: 0.9rem 0 1.25rem;
  padding: 0;
  border: 0;
}
.prose--wiki h2 {
  margin-top: 2.5rem;
}
.lede-s {
  font-style: italic;
  font-size: clamp(1.1rem, 2.2vw, 1.3rem);
  line-height: 1.45;
  color: var(--muted);
  max-width: 40rem;
}
.rail--wiki summary {
  list-style: none;
  cursor: pointer;
}
.rail--wiki summary::-webkit-details-marker {
  display: none;
}
.rail__group + .rail__group {
  margin-top: 1rem;
}
.rail__group-title {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--frame);
}
.rail__note {
  margin: 0 0 0.4rem;
  font-size: 0.82rem;
  color: var(--muted);
}

/* Key facts: a grid of label and value. */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  margin: 1.25rem 0 1.75rem;
  padding: 1px 0 0 1px;
  font-family: var(--f-util);
}
.facts div {
  padding: 0.55rem 0.8rem;
  margin: -1px 0 0 -1px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 60%, transparent);
}
.facts {
  grid-template-columns: repeat(auto-fill, minmax(min(11.5rem, 45%), 1fr));
}
.facts dt {
  font-size: 0.82rem;
  color: var(--muted);
}
.facts dd {
  margin: 0.1rem 0 0;
  color: var(--text);
}
.split {
  display: grid;
  grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  margin: 1.25rem 0 1rem;
}
.split .facts {
  margin: 0;
}
@media (max-width: 720px) {
  .split {
    grid-template-columns: minmax(0, 1fr);
  }
}

.table-wrap table.compact td,
.table-wrap table.compact th {
  white-space: nowrap;
}
.table-wrap table.compact td {
  text-align: right;
}
.table-wrap table.nowrap td {
  white-space: nowrap;
}
.table-wrap tbody th {
  color: var(--text);
  font-weight: 500;
  font-family: var(--f-body);
  font-size: inherit;
  white-space: normal;
  border-bottom: 1px solid color-mix(in srgb, var(--raised) 70%, transparent);
  padding-left: 0;
}

.meta,
.caption-label,
.see-also,
.word-list,
.note,
.counts {
  font-family: var(--f-util);
  font-size: 0.95rem;
  color: var(--muted);
}
.see-also {
  margin-top: 2rem;
}
.word-list span {
  color: var(--text);
}
.note {
  border-left: 2px solid var(--ember);
  padding-left: 0.9rem;
}
.muted {
  color: var(--muted);
}
.jump,
.inline-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.1rem;
  list-style: none;
  padding: 0;
  font-family: var(--f-util);
}
.prose .inline-list li {
  margin: 0;
}

/* Damage types, monsters, uniques and currencies keep their colour wherever they are named. */
.dt {
  font-weight: 500;
}
.dt.phys,
.dt-swatch--physical {
  color: var(--d-physical);
}
.dt.fire,
.dt-swatch--fire {
  color: var(--d-fire);
}
.dt.cold,
.dt-swatch--cold {
  color: var(--d-cold);
}
.dt.light,
.dt-swatch--lightning {
  color: var(--d-lightning);
}
.mname,
.cur {
  white-space: nowrap;
}
.mname::before,
.cur::before,
.prose--wiki .swatch {
  content: '';
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0.4rem var(--c);
}
.cur {
  color: var(--c);
}
.r-unique,
a.r-unique {
  color: var(--r-unique);
}
.orb {
  display: inline-block;
  width: 2.2rem;
  height: 2.2rem;
  flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8 0, var(--c) 35%, color-mix(in srgb, var(--c) 40%, #000) 100%);
  box-shadow: 0 0 1rem color-mix(in srgb, var(--c) 45%, transparent);
}
.with-orb {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

/* Item tooltips from the generator, in the concept wiki's frame: rarity-coloured header, magic
   blue mods, the unique's line in unique orange. */
.tooltips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0 1rem;
}
.tooltip {
  --rc: var(--r-normal);
  margin: 0.5rem 0 1.25rem;
  max-width: 22.5rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  box-shadow: 0 0 0 3px var(--ground), 0 0 0 4px var(--rule-soft), 0 12px 32px color-mix(in srgb, var(--ground) 80%, transparent);
  text-align: center;
  font-size: 1rem;
  line-height: 1.4;
  font-variant-numeric: tabular-nums lining-nums;
}
.tooltips .tooltip {
  margin: 0;
}
.tooltip.magic {
  --rc: var(--r-magic);
}
.tooltip.rare {
  --rc: var(--r-rare);
}
.tooltip.unique {
  --rc: var(--r-unique);
}
.prose .tt-name,
.tt-name {
  margin: 0;
  padding: 0.7rem 1rem 0.6rem;
  font-family: var(--f-display);
  font-size: 1.12rem;
  letter-spacing: 0.04em;
  line-height: 1.25;
  color: var(--rc);
  background: linear-gradient(color-mix(in srgb, var(--rc) 18%, var(--panel)), color-mix(in srgb, var(--rc) 7%, var(--panel)));
  border-bottom: 1px solid color-mix(in srgb, var(--rc) 45%, transparent);
}
.tt-name span {
  display: block;
  font-family: var(--f-body);
  letter-spacing: 0;
  font-size: 0.95rem;
}
.prose .tt-props,
.tt-props {
  margin: 0.6rem 1rem 0;
  color: var(--muted);
}
.tt-mod {
  color: var(--r-magic);
}
.prose .tooltip ul,
.tooltip ul {
  list-style: none;
  margin: 0;
  padding: 0.6rem 1rem;
  color: var(--r-magic);
}
.prose .tooltip li {
  margin: 0.12em 0;
}
.prose .tooltip li::marker {
  content: none;
}
.tooltip .tt-implicit {
  color: var(--text);
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rc) 50%, transparent), transparent) 1;
}
.tooltip .tt-implicit:last-child {
  border-bottom: 0;
}
.prose .tt-flavour,
.tt-flavour {
  margin: 0;
  padding: 0.6rem 1.1rem 0.8rem;
  font-style: italic;
  color: var(--r-unique);
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rc) 50%, transparent), transparent) 1;
}
.tooltip figcaption {
  padding: 0.5rem 1rem 0.7rem;
  font-family: var(--f-util);
  font-size: 0.85rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
}
.tooltip-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.tooltip-link:hover .tooltip {
  border-color: var(--rc);
}

/* Monster roster, currencies, entries. */
.roster,
.currencies,
.entries {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.25rem 2rem;
}
.prose .roster li,
.prose .currencies li,
.prose .entries li {
  margin: 0;
}
.roster li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
}
.roster li:not(:has(.roster__art)) {
  grid-template-columns: 1.1rem minmax(0, 1fr);
}
.roster p,
.currencies p {
  margin: 0 0 0.25rem;
}
.roster__art {
  border: 1px solid var(--line);
}
.roster__name,
.roster-name {
  font-family: var(--f-display);
  font-size: 1.15rem;
  letter-spacing: 0.03em;
}
.roster__name a,
.roster-name a {
  color: var(--text);
  text-decoration-color: color-mix(in srgb, var(--c) 60%, transparent);
}
.currencies li {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
}
.currencies p {
  font-family: var(--f-util);
  font-size: 0.95rem;
  color: var(--muted);
}
.currencies .currencies__name,
.currencies .cur-name {
  font-family: var(--f-display);
  font-size: 1.1rem;
  color: var(--c);
}
.currencies__name a,
.cur-name a {
  color: var(--c);
  text-decoration-color: color-mix(in srgb, var(--c) 45%, transparent);
}

/* Colour strips, damage types, flavour lines. */
.palette-strip {
  list-style: none;
  padding: 0;
  margin: 1rem 0 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.5rem;
}
.prose .palette-strip li {
  margin: 0;
  padding: 2.4rem 0.6rem 0.45rem;
  background: linear-gradient(var(--c), color-mix(in srgb, var(--c) 55%, var(--ground)));
  border: 1px solid var(--line);
  font-family: var(--f-util);
  font-size: 0.85rem;
}
.palette-strip span {
  color: var(--spark);
  text-shadow: 0 1px 3px var(--ground);
}
.dtypes {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-family: var(--f-util);
}
.dt-swatch::before {
  content: '';
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0.5rem currentColor;
  vertical-align: -0.05rem;
}
.flavours {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem 2rem;
  margin: 1.5rem 0;
}
.flavours figure {
  margin: 0;
}
.flavours blockquote {
  margin: 0 0 0.35rem;
  font-style: italic;
  color: var(--r-unique);
}
.flavours figcaption {
  font-family: var(--f-util);
  font-size: 0.85rem;
}

/* Galleries and figures from {{> gallery }} and {{> figure }}. */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: 2rem 1.75rem;
  margin: 1.5rem 0 2rem;
}
.gallery figure {
  margin: 0;
}
.gallery .art {
  border: 1px solid var(--rule);
  box-shadow: 0 0 0 5px var(--ground), 0 0 0 6px var(--rule-soft);
}
.gallery figcaption,
.figure--shot figcaption {
  margin-top: 1rem;
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.4;
  color: var(--muted);
}

/* A section of a repository doc, included as it is. */
.included {
  margin: 1.5rem 0 2rem;
}
.prose .included__source,
.included__source {
  font-family: var(--f-util);
  font-size: 0.85rem;
  color: var(--muted);
}

/* --- The game's assets (lib/assets.ts, assets/viewer.js) ------------------------------------ */

/* A 3D viewer: the stage the renderer paints, its labels, and a bar of buttons under it. */
.mv {
  margin: 1rem 0 0;
  min-width: 0;
}
.mv__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ground);
  border: 1px solid var(--line);
  overflow: hidden;
}
@media (max-width: 639px) {
  .mv__stage {
    aspect-ratio: 4 / 3;
  }
}
.mv__canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}
.mv__canvas:active {
  cursor: grabbing;
}
.mv__labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.mv__label {
  position: absolute;
  transform: translate(-50%, 0.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--f-util);
  font-size: 0.74rem;
  line-height: 1.25;
  color: var(--muted);
  white-space: nowrap;
  text-shadow: 0 1px 3px var(--ground);
}
.mv__label b {
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.04em;
}
.mv__label[hidden],
.mv__label span[hidden] {
  display: none;
}
.prose .mv__status,
.mv__status {
  position: absolute;
  inset: auto 0 0;
  margin: 0;
  padding: 0.75rem 1rem;
  font-family: var(--f-util);
  font-size: 0.85rem;
  color: var(--muted);
}
.mv__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}
.mv__gap {
  flex: 1 1 0;
}
.mv__bar button {
  font: 500 0.8rem/1 var(--f-util);
  letter-spacing: 0.03em;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.45rem 0.7rem;
  cursor: pointer;
}
.mv__bar button:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--ember) 40%, var(--line));
}
.mv__bar button[aria-pressed='true'] {
  color: var(--ember);
  border-color: color-mix(in srgb, var(--ember) 55%, transparent);
  background: color-mix(in srgb, var(--ember) 8%, var(--panel));
}
.mv__bar button:focus-visible {
  outline: 1px solid var(--ember);
  outline-offset: 2px;
}

/* A model group: the concept painting beside the shipped model. */
.mv-group {
  margin: 0 0 3rem;
}
.prose .mv__links,
.mv__links {
  margin: -0.4rem 0 0;
  font-family: var(--f-util);
  font-size: 0.9rem;
}
.mv-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.mv-pair__concept {
  margin: 1rem 0 0;
}
.mv-pair__concept figcaption {
  margin-top: 0.35rem;
  font-family: var(--f-util);
  font-size: 0.8rem;
  color: var(--muted);
}
@media (min-width: 640px) {
  .mv-pair:has(.mv-pair__concept) {
    grid-template-columns: 9rem minmax(0, 1fr);
  }
}
@media (max-width: 639px) {
  .mv-pair__concept {
    display: none;
  }
}
.mv__sub {
  color: var(--muted);
  font-size: 0.85em;
}
.mv__over {
  color: var(--cinder);
}
.prose .mv__note,
.mv__note,
.prose .asset-totals {
  font-family: var(--f-util);
  font-size: 0.85rem;
  color: var(--muted);
}
.mv-group .table-wrap {
  margin: 1rem 0 0.75rem;
}

/* Galleries of HUD art and texture maps, on a checkerboard so transparency shows. */
.asset-count {
  font-family: var(--f-util);
  font-size: 0.8rem;
  color: var(--muted);
  vertical-align: middle;
}
.prose ul.asset-grid,
.asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 2.25rem;
  padding: 0;
  list-style: none;
}
.prose ul.asset-grid--wide,
.asset-grid--wide {
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}
.prose .asset-tile,
.asset-tile {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0;
  min-width: 0;
}
.asset-tile__img {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 0.5rem;
  border: 1px solid var(--line);
  background-color: #0e0d11;
  background-image: conic-gradient(#17161b 25%, transparent 0 50%, #17161b 0 75%, transparent 0);
  background-size: 16px 16px;
}
.asset-grid--wide .asset-tile__img {
  padding: 0;
}
.asset-tile__img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.asset-grid--wide .asset-tile__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.asset-tile--painted .asset-tile__img {
  border-color: color-mix(in srgb, var(--gilded) 45%, var(--line));
}
.asset-tile__name code {
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}
.asset-tile__meta {
  font-family: var(--f-util);
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--muted);
}
.table-wrap table.mv-table {
  font-size: 0.86rem;
}
.table-wrap table.mv-table th,
.table-wrap table.mv-table td {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* --- The asset explorer (art/assets.html; lib/assets.ts, assets/explorer.js) ------------------ */

/* An app, not an article: it fills the window and only its panels scroll. Wide: files, viewer,
   inspector side by side. Medium: the inspector under the viewer. Phone: the files or the viewer,
   switched in the top bar. */
.app-body {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.ax {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: 20rem minmax(0, 1fr) 19rem;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: 'top top top' 'files view details';
  font-family: var(--f-util);
  color: var(--text);
  background: var(--ground);
}
.ax__top {
  grid-area: top;
}
.ax__files {
  grid-area: files;
}
.ax__view {
  grid-area: view;
}
.ax__details {
  grid-area: details;
}
@media (max-width: 1179px) {
  .ax {
    grid-template-columns: 18rem minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: 'top top' 'files view' 'files details';
  }
  .ax__details {
    max-height: 34vh;
    border-top: 1px solid var(--line);
  }
}
@media (max-width: 719px) {
  .ax {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: 'top' 'files';
  }
  .ax[data-pane='view'] {
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: 'top' 'view' 'details';
  }
  .ax[data-pane='view'] .ax__files,
  .ax[data-pane='list'] .ax__view,
  .ax[data-pane='list'] .ax__details,
  .ax[data-pane='view'] .ax__filters {
    display: none;
  }
  .ax__details {
    max-height: 40dvh;
  }
}

/* The top bar: the way back to the site, search, filters, and the app's own buttons. */
.ax__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid color-mix(in srgb, var(--frame) 22%, var(--line));
  background: var(--panel);
}
.ax__brand {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text);
  text-decoration: none;
  font-family: var(--f-display);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}
.ax__brand:hover {
  color: var(--ember);
}
.ax__brand img {
  display: block;
}
.ax__app {
  margin: 0;
  padding-left: 0.9rem;
  border-left: 1px solid var(--line);
  font: 600 0.78rem/1 var(--f-util);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--frame);
}
.ax__search {
  position: relative;
  flex: 0 1 15rem;
  min-width: 8rem;
}
.ax__q {
  width: 100%;
  font: 500 0.88rem/1.2 var(--f-util);
  color: var(--text);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.42rem 2rem 0.42rem 0.6rem;
}
.ax__q::placeholder {
  color: color-mix(in srgb, var(--muted) 75%, transparent);
}
.ax__key {
  position: absolute;
  right: 0.45rem;
  top: 50%;
  transform: translateY(-50%);
  font: 0.7rem/1 var(--f-util);
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.15rem 0.35rem;
  pointer-events: none;
}
.ax__q:focus + .ax__key,
.ax__q:not(:placeholder-shown) + .ax__key {
  display: none;
}
.ax__q:focus,
.ax select:focus {
  outline: 1px solid var(--ember);
  outline-offset: 0;
  border-color: transparent;
}
.ax__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.ax__kinds {
  display: flex;
  gap: 0.25rem;
}
.ax select {
  font: 500 0.8rem/1.2 var(--f-util);
  color: var(--text);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.36rem 0.4rem;
  max-width: 11rem;
}
.ax__actions {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
}
.ax__panes {
  display: none;
}
.ax__kinds button,
.ax__actions button,
.ax__arrange button,
.ax__bar button,
.ax__about-close {
  font: 500 0.78rem/1 var(--f-util);
  letter-spacing: 0.03em;
  color: var(--muted);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.4rem 0.55rem;
  cursor: pointer;
  white-space: nowrap;
}
.ax__bar button {
  background: var(--panel);
}
.ax__kinds button span {
  margin-left: 0.3rem;
  color: color-mix(in srgb, var(--muted) 70%, transparent);
  font-variant-numeric: tabular-nums;
}
.ax button:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--ember) 40%, var(--line));
}
.ax button[aria-pressed='true'],
.ax button[aria-expanded='true'] {
  color: var(--ember);
  border-color: color-mix(in srgb, var(--ember) 55%, transparent);
  background: color-mix(in srgb, var(--ember) 8%, var(--panel));
}
.ax button:focus-visible {
  outline: 1px solid var(--ember);
  outline-offset: 2px;
}
@media (max-width: 719px) {
  .ax__top {
    gap: 0.45rem 0.5rem;
    padding: 0.5rem 0.65rem;
  }
  .ax__brand span,
  .ax__app {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .ax__search {
    flex: 1 1 0;
  }
  .ax__actions {
    order: 3;
    flex: 1 0 100%;
  }
  .ax__panes {
    display: flex;
    margin-right: auto;
  }
  .ax__panes button + button {
    margin-left: -1px;
  }
  .ax__filters {
    order: 4;
    flex: 1 0 100%;
  }
  .ax__kinds {
    flex: 1 0 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ax select {
    flex: 1 1 0;
    max-width: none;
  }
  .ax__key {
    display: none;
  }
  .ax__kinds button {
    padding: 0.4rem 0.45rem;
  }
}

/* The files: a row each, or a grid of thumbnails, a heading per group. */
.ax__files {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 45%, var(--ground));
}
.ax__side {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem 0.4rem;
}
.ax__arrange {
  display: flex;
}
.ax__arrange button + button {
  margin-left: -1px;
}
.ax__count {
  margin: 0;
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
}
.ax__list {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0 0.4rem 0.6rem;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.ax__list li {
  margin: 0;
}
.ax__head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 0.5rem 0.25rem;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--frame);
}
.ax__head:first-child {
  padding-top: 0.25rem;
}
.ax__headkind {
  color: color-mix(in srgb, var(--muted) 70%, transparent);
}
.ax__spacer {
  pointer-events: none;
}
.ax__list--grid .ax__spacer {
  grid-column: 1 / -1;
}
.ax__empty {
  padding: 1rem 0.5rem;
  color: var(--muted);
  font-size: 0.85rem;
}
.ax__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.45rem;
  border: 1px solid transparent;
  color: var(--text);
  text-decoration: none;
}
.ax__item:hover {
  background: color-mix(in srgb, var(--raised) 55%, transparent);
}
.ax__item[aria-current] {
  background: color-mix(in srgb, var(--ember) 9%, var(--panel));
  border-color: color-mix(in srgb, var(--ember) 45%, transparent);
}
.ax__item:focus-visible {
  outline: 1px solid var(--ember);
  outline-offset: -1px;
}
.ax__thumb {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0e0d11;
}
.ax__thumb--checker,
.ax__img[data-ground='checker'] {
  background-color: #0e0d11;
  background-image: conic-gradient(#1b1a20 25%, transparent 0 50%, #1b1a20 0 75%, transparent 0);
  background-size: 12px 12px;
}
.ax__thumb img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.ax__thumb canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.ax__glyph {
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.ax__glyph--font {
  font-size: 1.3rem;
  letter-spacing: 0;
  color: var(--text);
}
.ax__itext {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}
.ax__name,
.ax__meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ax__name {
  font-size: 0.84rem;
  line-height: 1.3;
}
.ax__meta {
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--muted);
}
.ax__flag {
  flex: none;
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cinder);
}
.ax__flag--painted {
  color: var(--gilded);
}
.ax__list--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr));
  align-content: start;
  gap: 0.3rem;
}
.ax__list--grid .ax__head,
.ax__list--grid .ax__empty {
  grid-column: 1 / -1;
}
.ax__list--grid .ax__item {
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  padding: 0.3rem;
}
.ax__list--grid .ax__thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}
.ax__list--grid .ax__name {
  font-size: 0.7rem;
}
.ax__list--grid .ax__meta {
  display: none;
}
.ax__list--grid .ax__flag {
  position: absolute;
  top: 0.45rem;
  left: 0.45rem;
  padding: 0.1rem 0.25rem;
  background: color-mix(in srgb, var(--ground) 80%, transparent);
}

/* The tree: a row per open folder and file, indented by level (--lvl, set by explorer.js). */
.ax__folder,
.ax__item[aria-level] {
  padding-left: calc(0.35rem + var(--lvl, 0) * 0.95rem);
}
.ax__folder {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding-top: 0.32rem;
  padding-bottom: 0.32rem;
  padding-right: 0.5rem;
  border: 1px solid transparent;
  font-size: 0.84rem;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.ax__folder[aria-level='1'] {
  margin-top: 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--frame);
}
.ax__folder:hover {
  background: color-mix(in srgb, var(--raised) 55%, transparent);
}
.ax__folder:focus-visible {
  outline: 1px solid var(--ember);
  outline-offset: -1px;
}
.ax__twisty {
  flex: none;
  width: 0.9rem;
  text-align: center;
  color: var(--muted);
  transition: transform 0.12s;
}
.ax__twisty::before {
  content: '▸';
}
[aria-expanded='true'] > .ax__twisty {
  transform: rotate(90deg);
}
.ax__fname {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ax__fcount {
  flex: none;
  font-size: 0.7rem;
  letter-spacing: 0;
  color: color-mix(in srgb, var(--muted) 75%, transparent);
  font-variant-numeric: tabular-nums;
}
.ax__item[aria-level] {
  gap: 0.5rem;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}
/* A file sits under its folder's name, past the folder's arrow; an asset of several files has
   its own arrow there, to show its files. */
.ax__item[aria-level] .ax__thumb {
  width: 1.9rem;
  height: 1.9rem;
  margin-left: 1.25rem;
}
.ax__item--asset[aria-level] {
  gap: 0.35rem;
}
.ax__item--asset[aria-level] .ax__thumb {
  margin-left: 0;
}
.ax__item--asset .ax__twisty {
  cursor: pointer;
}
.ax__item--asset:not([aria-level]) .ax__twisty {
  display: none;
}
.ax__item.is-in-selection:not([aria-current]) {
  background: color-mix(in srgb, var(--ember) 5%, transparent);
}
.ax__item[aria-level] .ax__name {
  font-size: 0.8rem;
}
.ax__item[aria-level] .ax__meta {
  font-size: 0.68rem;
}

/* The viewer: one stage, a layer per kind of asset, the selection's buttons under it. */
.ax__view {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.ax .ax__stage {
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: auto;
  border: 0;
}
.ax__img,
.ax__font,
.ax__text {
  position: absolute;
  inset: 0;
}
.ax__img {
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.ax__img:active {
  cursor: grabbing;
}
.ax__img[data-ground='dark'] {
  background: var(--ground);
}
.ax__img[data-ground='light'] {
  background: #d8d3c6;
}
.ax__img img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  transform-origin: 0 0;
  pointer-events: none;
}
.ax__img img.is-pixelated {
  image-rendering: pixelated;
}
.ax__font {
  overflow: auto;
  padding: clamp(1rem, 3vw, 2.25rem);
  background: radial-gradient(90% 80% at 50% 40%, color-mix(in srgb, var(--raised) 35%, transparent), transparent 70%), var(--ground);
}
.ax__spec {
  font-family: monospace;
  color: var(--text);
}
.ax__spec p {
  margin: 0 0 0.6em;
}
.ax__spec .ax__spec-name {
  font-family: var(--f-util);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--frame);
}
.ax__spec .ax__sample {
  font-size: clamp(1.6rem, 3.6vw, 2.8rem);
  line-height: 1.15;
  margin-bottom: 0.5em;
  outline: none;
}
.ax__spec .ax__sample:focus {
  box-shadow: inset 0 -1px 0 var(--ember);
}
.ax__spec .ax__spec-line {
  font-size: clamp(1rem, 2vw, 1.3rem);
  overflow-wrap: anywhere;
}
.ax__spec .ax__spec-size {
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ax__spec-size span {
  display: inline-block;
  width: 3.2rem;
  font: 0.72rem var(--f-util);
  color: var(--muted);
}
.ax__text {
  margin: 0;
  padding: 1rem 1.25rem;
  overflow: auto;
  background: var(--ground);
  font: 0.8rem/1.55 ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ax [hidden] {
  display: none !important;
}
.ax .ax__bar {
  flex: none;
  align-items: center;
  margin: 0;
  min-height: 2.6rem;
  padding: 0.4rem 0.6rem;
  border-top: 1px solid var(--line);
  background: var(--panel);
}
.ax__zoom,
.ax__hint {
  min-width: 3.2em;
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  text-align: right;
}
.ax__hint {
  text-align: left;
}
.ax__range {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.76rem;
  color: var(--muted);
}
.ax__range input {
  width: 9rem;
  accent-color: var(--ember);
}
/* A wardrobe's pickers: the body, and a piece per slot. */
.ax__pick {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.76rem;
  color: var(--muted);
  white-space: nowrap;
}
.ax__pick select {
  font: 500 0.78rem/1 var(--f-util);
  color: var(--text);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.32rem 0.4rem;
  cursor: pointer;
}
.ax__pick select:hover {
  border-color: color-mix(in srgb, var(--ember) 40%, var(--line));
}
.ax__pick select:focus-visible {
  outline: 1px solid var(--ember);
  outline-offset: 2px;
}

/* The inspector. */
.ax__details {
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  padding: 0.9rem 1rem 1rem;
  border-left: 1px solid var(--line);
  background: var(--panel);
  font-size: 0.84rem;
  line-height: 1.4;
}
.ax__details p,
.ax__details ul {
  margin: 0;
}
.ax__kicker {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--frame);
}
.ax__title {
  margin: 0.2rem 0 0.75rem;
  font: 600 1.1rem/1.25 var(--f-util);
  letter-spacing: 0.01em;
  color: var(--text);
  overflow-wrap: anywhere;
}
.ax__facts {
  margin: 0;
  display: grid;
  gap: 0.35rem;
}
.ax__facts div {
  display: grid;
  grid-template-columns: 5.6rem minmax(0, 1fr);
  gap: 0.5rem;
}
.ax__facts dt {
  color: var(--muted);
}
.ax__facts dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.ax__meter {
  display: block;
  height: 4px;
  margin-top: 0.3rem;
  background: var(--raised);
}
.ax__meter span {
  display: block;
  height: 100%;
  background: var(--frame);
}
.ax__meter.is-over span {
  background: var(--cinder);
}
.ax__details .ax__sublabel {
  margin: 1rem 0 0.3rem;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.ax__members ul,
.ax__links ul {
  padding: 0;
  list-style: none;
}
.ax__members ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
}
.ax__links ul {
  display: grid;
  gap: 0.2rem;
}
.ax__details a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.2em;
}
.ax__details a:hover {
  color: var(--ember);
}
.ax__members [aria-current] {
  color: var(--ember);
}
.ax__details .ax__file {
  margin-top: 1rem;
}
.ax__details .ax__path {
  margin-top: 0.5rem;
}
.ax__path code {
  font-size: 0.72rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.ax__partof {
  margin: -0.45rem 0 0.75rem !important;
  font-size: 0.8rem;
  color: var(--muted);
}
.ax__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}
.ax__table th,
.ax__table td {
  padding: 0.3rem 0.35rem 0.3rem 0;
  text-align: right;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.ax__table th:first-child,
.ax__table td:has(> .ax__holds) {
  text-align: left;
}
.ax__table td:has(> .ax__holds) {
  white-space: normal;
}
.ax__table thead th {
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.ax__over {
  color: var(--cinder);
}
.ax__paths .ax__path + .ax__path {
  margin-top: 0.15rem;
}
.ax__filters-svg {
  position: absolute;
}

/* About: the page's text and every asset as a table, over the app. */
.ax__about {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 10;
  width: min(46rem, 100%);
  overflow-y: auto;
  padding: 1.25rem clamp(1rem, 4vw, 2.25rem) 2.5rem;
  border-left: 1px solid color-mix(in srgb, var(--frame) 30%, var(--line));
  background: var(--panel);
  box-shadow: -30px 0 80px -20px var(--ground);
}
.ax__about-close {
  position: sticky;
  top: 0;
  float: right;
  z-index: 1;
}
.ax__about-body {
  font-family: var(--f-body);
  color: var(--text);
}
@media (hover: none) {
  .ax__key {
    display: none;
  }
}
.ax__about-body h2 {
  margin-top: 0.4rem;
}
.ax__about-body .article__summary {
  margin: 0 0 1.5rem;
  max-width: none;
}
.prose kbd {
  font: 0.8em var(--f-util);
  padding: 0.05em 0.35em;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--ground);
}
.table-wrap table.ax-table td:nth-child(3) {
  min-width: 16rem;
}

/* ---- The build planner (game/planner.html, assets/planner.js): an app like the asset explorer.
   The sidebar holds the build's numbers, the main pane its gear, skills, enemy and breakdown. */
.bp {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: 19rem minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: 'top top' 'side main';
  font-family: var(--f-util);
  color: var(--text);
  background: var(--ground);
}
.bp__top {
  grid-area: top;
}
.bp__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-left: auto;
}
.bp__toast {
  flex-basis: 100%;
  margin: 0;
  min-height: 0;
  font-size: 0.8rem;
  color: var(--gilded);
  text-align: right;
}
.bp__toast:empty {
  display: none;
}
.bp__btn,
.bp__seg button {
  font: 500 0.78rem/1 var(--f-util);
  letter-spacing: 0.03em;
  color: var(--muted);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.42rem 0.6rem;
  cursor: pointer;
  white-space: nowrap;
}
.bp__btn:hover,
.bp__seg button:hover:not(:disabled) {
  color: var(--text);
  border-color: color-mix(in srgb, var(--frame) 45%, var(--line));
}
.bp__btn[aria-pressed='true'],
.bp__seg button[aria-pressed='true'] {
  color: var(--ground);
  background: var(--frame);
  border-color: var(--frame);
}
.bp__btn--main {
  color: var(--text);
  border-color: color-mix(in srgb, var(--ember) 60%, var(--line));
}
.bp__btn--small {
  padding: 0.3rem 0.45rem;
  font-size: 0.72rem;
}
.bp__btn:disabled,
.bp__seg button:disabled {
  opacity: 0.45;
  cursor: default;
}
.bp__side {
  grid-area: side;
  overflow-y: auto;
  padding: 0.9rem 0.9rem 2rem;
  border-right: 1px solid var(--line);
  background: var(--panel);
}
.bp__main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.bp__tabs {
  display: flex;
  gap: 0;
  padding: 0 0.9rem;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.bp__tabs button {
  font: 600 0.78rem/1 var(--f-util);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0.75rem 0.85rem 0.65rem;
  cursor: pointer;
}
.bp__tabs button:hover {
  color: var(--text);
}
.bp__tabs button[aria-selected='true'] {
  color: var(--gilded);
  border-bottom-color: var(--ember);
}
.bp__panel {
  flex: 1;
  overflow-y: auto;
  padding: 1rem clamp(0.9rem, 2vw, 1.6rem) 3rem;
}
.bp__status,
.bp__note {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
  margin: 0.3rem 0 0.8rem;
}
.bp__note a {
  color: var(--frame);
}
.bp__note--preview {
  color: var(--gilded);
}
.bp__h {
  margin: 1.1rem 0 0.5rem;
  font: 600 0.74rem/1.3 var(--f-util);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--frame);
}
.bp__h:first-child {
  margin-top: 0;
}
.bp__level {
  display: grid;
  grid-template-columns: auto 1fr 4.2rem;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
  font-size: 0.85rem;
}
.bp__attrs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
  margin: 0 0 0.7rem;
  padding: 0;
  border: 0;
  font-size: 0.85rem;
}
.bp__attrs legend {
  margin-bottom: 0.35rem;
  padding: 0;
}
.bp__attrs legend.is-over {
  color: var(--ember);
}
.bp__attrs label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.bp__attrs .bp__num {
  width: 100%;
  min-width: 0;
}
.bp__level input[type='range'] {
  accent-color: var(--ember);
  width: 100%;
}
.bp__num,
.bp__val,
.bp__field select,
.bp__tier {
  font: 500 0.85rem/1.2 var(--f-util);
  color: var(--text);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.3rem 0.4rem;
}
.bp__num {
  width: 4.2rem;
}
.bp__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.bp__side > .bp__field {
  margin-bottom: 0.4rem;
}
.bp__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1rem;
  margin-bottom: 0.6rem;
}
.bp__seg {
  display: flex;
}
.bp__seg button {
  border-radius: 0;
}
.bp__seg button + button {
  border-left: 0;
}
.bp__seg button.bp__r--magic[aria-pressed='true'] {
  background: var(--r-magic);
  border-color: var(--r-magic);
}
.bp__seg button.bp__r--rare[aria-pressed='true'] {
  background: var(--r-rare);
  border-color: var(--r-rare);
}
.bp__seg button.bp__r--unique[aria-pressed='true'] {
  background: var(--r-unique);
  border-color: var(--r-unique);
}
.bp__stats {
  margin: 0;
}
.bp__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.28rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  font-size: 0.86rem;
}
.bp__row dt {
  color: var(--muted);
}
.bp__row dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.bp__row--fire dd {
  color: var(--d-fire);
}
.bp__row--cold dd {
  color: var(--d-cold);
}
.bp__row--lightning dd {
  color: var(--d-lightning);
}
.bp__stats--inline {
  max-width: 24rem;
}
.bp__total,
.bp__total th,
.bp__total td,
.bp__row.bp__total dd {
  color: var(--gilded);
  font-weight: 600;
}
.bp__d {
  display: block;
  font-size: 0.74rem;
}
.bp__d--up {
  color: #8fd18a; /* site-invented: better */
}
.bp__d--down {
  color: #e8806a; /* site-invented: worse */
}
.bp__gear {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 1.4rem;
  align-items: start;
}
.bp__doll {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}
.bp__card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-height: 6.5rem;
  padding: 0.6rem 0.7rem;
  text-align: left;
  font: inherit;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--rc, var(--line));
  border-radius: 2px;
  cursor: pointer;
}
.bp__card:hover {
  border-color: color-mix(in srgb, var(--frame) 40%, var(--line));
  border-left-color: var(--rc, var(--frame));
}
.bp__card.is-on {
  border-color: var(--frame);
  border-left-color: var(--rc, var(--frame));
  background: color-mix(in srgb, var(--frame) 8%, var(--panel));
}
.bp__card--normal {
  --rc: var(--r-normal);
}
.bp__card--magic {
  --rc: var(--r-magic);
}
.bp__card--rare {
  --rc: var(--r-rare);
}
.bp__card--unique {
  --rc: var(--r-unique);
}
.bp__card--empty {
  border-style: dashed;
}
.bp__slot {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.bp__name {
  font-family: var(--f-body);
  font-size: 0.98rem;
  line-height: 1.2;
  color: var(--rc, var(--text));
}
.bp__empty {
  color: var(--muted);
  font-style: italic;
  font-size: 0.85rem;
}
.bp__lines {
  margin: 0.1rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--r-magic);
}
.bp__line--implicit {
  color: var(--text);
}
.bp__line--unique {
  color: var(--r-magic);
}
.bp__loss {
  margin-top: auto;
  padding-top: 0.3rem;
  font-size: 0.72rem;
  color: var(--muted);
}
.bp__mods,
.bp__opts {
  margin: 0 0 0.8rem;
  padding: 0;
  list-style: none;
}
.bp__mod {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
}
.bp__mod--implicit {
  border-bottom-color: color-mix(in srgb, var(--frame) 35%, var(--line));
}
.bp__kind {
  flex: 0 0 3.6rem;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.bp__text {
  flex: 1 1 14rem;
  color: var(--r-magic);
}
.bp__mod--implicit .bp__text {
  color: var(--text);
}
.bp__val {
  width: 3.6rem;
  padding: 0.15rem 0.3rem;
  margin: 0 0.1rem;
  color: inherit;
}
.bp__val--out {
  border-color: #e8806a;
}
.bp__tier {
  max-width: 15rem;
  font-size: 0.78rem;
}
.bp__opt--locked {
  color: var(--muted);
}
.bp__warn {
  font-size: 0.72rem;
  color: #e8806a;
}
.bp__x {
  font: 600 1rem/1 var(--f-util);
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0.1rem 0.3rem;
  cursor: pointer;
}
.bp__x:hover {
  color: var(--ember);
}
.bp__buttons {
  display: flex;
  gap: 0.4rem;
  margin: 0.4rem 0 0.6rem;
}
.bp__opt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  width: 100%;
  padding: 0.45rem 0.5rem;
  text-align: left;
  font: inherit;
  font-size: 0.86rem;
  color: var(--text);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.bp__opt:hover,
.bp__opt:focus-visible {
  background: color-mix(in srgb, var(--frame) 10%, transparent);
}
.bp__gain {
  flex: 1 0 100%;
  padding-left: 4.2rem;
  font-size: 0.76rem;
  color: #8fd18a;
}
.bp__gain--down {
  color: var(--muted);
}
.bp__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: 1.5rem 2rem;
  align-items: start;
}
.bp__check {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-right: 0.9rem;
  font-size: 0.85rem;
  color: var(--text);
}
.bp__checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0;
  margin-bottom: 0.8rem;
}
.bp__scroll {
  overflow-x: auto;
  margin-bottom: 1rem;
}
.bp__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
}
.bp__table th,
.bp__table td {
  padding: 0.4rem 0.55rem;
  border-bottom: 1px solid var(--line);
  text-align: right;
  white-space: nowrap;
}
.bp__table thead th {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.bp__table tbody th {
  text-align: left;
  font-weight: 500;
  white-space: normal;
  min-width: 10rem;
}
.bp__table th a {
  color: var(--text);
}
.bp__table tr.is-on th,
.bp__table tr.is-on td {
  background: color-mix(in srgb, var(--frame) 9%, transparent);
}
.bp__sub {
  display: block;
  font-size: 0.74rem;
  color: var(--muted);
  font-weight: 400;
}
.bp__dt--physical {
  color: var(--d-physical);
}
.bp__dt--fire {
  color: var(--d-fire);
}
.bp__dt--cold {
  color: var(--d-cold);
}
.bp__dt--lightning {
  color: var(--d-lightning);
}
@media (max-width: 1100px) {
  .bp__gear {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 760px) {
  .bp {
    position: static;
    display: block;
  }
  .app-body:has(.bp) {
    height: auto;
    overflow: visible;
  }
  .bp__side {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .bp__panel {
    overflow: visible;
  }
  .bp__tabs {
    position: sticky;
    top: 0;
    z-index: 2;
    overflow-x: auto;
  }
  .bp__actions {
    margin-left: 0;
  }
  .bp__doll {
    grid-template-columns: minmax(0, 1fr);
  }
}
.bp__req {
  font-size: 0.72rem;
  color: var(--muted);
}
.bp__req--unmet {
  color: #e8806a;
}
.bp__card--off .bp__name,
.bp__card--off .bp__lines {
  opacity: 0.45;
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, #e8806a 60%, transparent);
}
.bp__enforce {
  margin-top: 0.8rem;
}
.bp__slots {
  margin: 0 0 1.4rem;
  padding: 0;
  list-style: none;
}
.bp__slotrow {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 0.4rem 1.2rem;
  padding: 0.7rem 0.6rem;
  border-bottom: 1px solid var(--line);
}
.bp__slotrow.is-on {
  background: color-mix(in srgb, var(--frame) 7%, transparent);
}
.bp__slotgems {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.bp__gem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}
.bp__gem select {
  font: 500 0.85rem/1.2 var(--f-util);
  color: var(--text);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.28rem 0.35rem;
}
.bp__act {
  min-width: 11rem;
  color: var(--gilded) !important;
  border-color: color-mix(in srgb, var(--frame) 45%, var(--line)) !important;
}
.bp__gem--support {
  padding-left: 1.9rem;
}
.bp__sup {
  min-width: 11rem;
  color: var(--tide) !important;
}
.bp__slotno {
  width: 1.4rem;
  text-align: center;
  font-size: 0.72rem;
  color: var(--muted);
}
.bp__slotnums {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}
.bp__mini {
  display: grid;
  grid-template-columns: repeat(5, auto);
  gap: 0.2rem 1rem;
  margin: 0;
}
.bp__mini dt {
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.bp__mini dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.bp__suggest {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.4rem;
  padding-left: 1.9rem;
}
.bp__suggest:empty {
  display: none;
}
.bp__chip {
  font: 500 0.76rem/1 var(--f-util);
  color: var(--text);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
}
.bp__chip span {
  color: #8fd18a;
  margin-left: 0.3rem;
}
.bp__chip--down span {
  color: var(--muted);
}
.bp__chip:hover {
  border-color: var(--tide);
}
@media (max-width: 760px) {
  .bp__slotrow {
    grid-template-columns: minmax(0, 1fr);
  }
  .bp__mini {
    grid-template-columns: repeat(3, auto);
  }
}

/* The Rose (the planner's passive tree): ink on the dark, white where lit, your gate a red coal.
   It takes the whole panel, under one bar. */
.bp__panel--rose {
  display: flex;
  padding: 0;
  overflow: hidden;
}
.rose {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.rose__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  padding: 0.6rem clamp(0.9rem, 2vw, 1.6rem);
  border-bottom: 1px solid var(--line);
}
.rose__points {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}
.rose__points strong {
  color: var(--text);
  font-size: 1.1rem;
}
.rose__points.is-over {
  color: #e8806a;
}
.rose__find {
  width: 14rem;
}
.rose__stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.rose__svg {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  user-select: none;
}
.rose__svg.is-zoomed {
  cursor: grab;
}
.rose__svg.is-panning,
.rose__svg.is-panning .rose__node {
  cursor: grabbing;
}
.rose__art {
  opacity: 0.2;
  mix-blend-mode: screen;
  pointer-events: none;
}
.rose__trace {
  fill: none;
  stroke: color-mix(in srgb, var(--frame) 32%, transparent);
  stroke-width: 0.0025;
}
.rose__pearl {
  fill: color-mix(in srgb, var(--frame) 40%, transparent);
}
.rose__zoom {
  position: absolute;
  right: 0.4rem;
  bottom: 0.4rem;
  display: flex;
  gap: 0.25rem;
}
.rose__zoom .bp__btn {
  min-width: 2rem;
  background: var(--ground);
}
.rose__ring {
  fill: none;
  stroke: color-mix(in srgb, var(--frame) 14%, transparent);
  stroke-width: 0.003;
}
.rose__house {
  fill: var(--ground);
  stroke: color-mix(in srgb, var(--text) 35%, transparent);
  stroke-width: 0.004;
  stroke-dasharray: 0.012 0.01;
}
.rose__house-label {
  font: italic 0.042px var(--f-body);
  fill: color-mix(in srgb, var(--text) 40%, transparent);
  text-anchor: middle;
}
.rose__label {
  font: 600 0.045px var(--f-util);
  letter-spacing: 0.004px;
  text-transform: uppercase;
  fill: color-mix(in srgb, var(--frame) 55%, transparent);
  text-anchor: middle;
}
.rose__label.is-you {
  fill: var(--ember);
}
.rose__link {
  stroke: color-mix(in srgb, var(--text) 18%, transparent);
  stroke-width: 0.004;
}
.rose__link.is-lit {
  stroke: #f4f1ea;
  stroke-width: 0.01;
}
.rose__link.is-path {
  stroke: var(--tide);
  stroke-width: 0.01;
  stroke-dasharray: 0.02 0.012;
}
.rose__node {
  fill: var(--panel);
  stroke: color-mix(in srgb, var(--text) 45%, transparent);
  stroke-width: 0.005;
  cursor: pointer;
  transition: fill 0.25s, stroke 0.25s;
}
.rose__node--notable {
  stroke: color-mix(in srgb, var(--frame) 70%, transparent);
  stroke-width: 0.007;
}
.rose__node--keystone {
  stroke: var(--frame);
  stroke-width: 0.009;
}
.rose__node--seat {
  stroke: var(--tide);
  stroke-width: 0.008;
}
.rose__node.is-seat:not(.is-lit) {
  stroke-dasharray: 0.012 0.008;
}
.rose__node:hover,
.rose__node:focus-visible {
  stroke: var(--tide);
  outline: none;
}
.rose__node.is-lit {
  fill: #f4f1ea;
  stroke: #fff;
  filter: drop-shadow(0 0 0.015px #fff);
}
.rose__node.is-path {
  fill: color-mix(in srgb, var(--tide) 45%, var(--panel));
  stroke: var(--tide);
}
.rose__node--start {
  cursor: default;
}
.rose__node.is-you {
  fill: var(--cinder);
  stroke: var(--ember);
  filter: drop-shadow(0 0 0.02px var(--ember));
}
.rose__node.is-other {
  fill: var(--ground);
  stroke: color-mix(in srgb, var(--text) 20%, transparent);
}
.rose__node.is-match {
  stroke: var(--gilded);
  stroke-width: 0.012;
}
.rose__tip {
  position: absolute;
  z-index: 3;
  width: 15rem;
  padding: 0.55rem 0.7rem;
  background: color-mix(in srgb, var(--ground) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--frame) 45%, var(--line));
  border-radius: 2px;
  pointer-events: none;
  font-size: 0.82rem;
}
.rose__tip-name {
  margin: 0 0 0.3rem;
  font-family: var(--f-body);
  font-size: 1rem;
  color: var(--text);
}
.rose__tip-name span {
  font: 600 0.62rem/1 var(--f-util);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--frame);
  margin-left: 0.3rem;
}
.rose__tip ul {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--r-magic);
}
.rose__ks {
  color: var(--gilded);
}
.rose__tip-act {
  margin: 0.4rem 0 0;
  font-size: 0.74rem;
  color: var(--muted);
}