/* Master Runes D87 · Wiki "Vocations" / "Starting towns" (loaded only by those two sections). Brand tokens only. */
.tp-vw { max-width: 980px; }
.tp-vw-intro { color: var(--brand-text-soft, #d8d0bd); line-height: 1.55; max-width: 72ch; }
.tp-vw-muted { color: var(--brand-text-muted, #a79f8c); }
.tp-vw-small { font-size: 12px; }
.tp-vw-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.tp-vw-jump a { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--brand-border, #3a3246); color: var(--brand-text, #f3eee2); text-decoration: none; font-size: 13px; }
.tp-vw-jump a:hover, .tp-vw-jump a:focus-visible { border-color: var(--brand-accent, #e0b249); color: var(--brand-accent, #e0b249); }
.tp-vw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; margin: 8px 0 16px; }
.tp-vw-card { background: var(--brand-surface, #1b1624); border: 1px solid var(--brand-border, #3a3246); border-radius: 12px; padding: 16px; min-width: 0; scroll-margin-top: 80px; }
.tp-vw-card h2 { margin: 0; font-family: var(--brand-font-display, serif); color: var(--brand-accent, #e0b249); border: 0; padding: 0; }
.tp-vw-card h3 { margin: 12px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--brand-text-muted, #a79f8c); }
.tp-vw-card p { line-height: 1.5; }
.tp-vw-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tp-vw-figs { display: flex; gap: 6px; }
.tp-vw-role { margin: 2px 0 6px; color: var(--brand-text-soft, #d8d0bd); font-style: italic; }
.tp-vw-diff { display: inline-block; font-size: 12px; padding: 1px 9px; border-radius: 999px; border: 1px solid var(--brand-border, #3a3246); }
.tp-vw-diff[data-level="1"] { color: #8fe39b; border-color: rgb(143 227 155 / .5); }
.tp-vw-diff[data-level="2"] { color: #e6d27a; border-color: rgb(230 210 122 / .5); }
.tp-vw-diff[data-level="3"] { color: #f0a070; border-color: rgb(240 160 112 / .5); }
/* 40x40 art shown at 3x, crisp. The walking strip (N x 40) sits over the still frame; without it the still frame shows. */
.tp-vw-fig { position: relative; display: inline-block; width: 120px; height: 120px; border-radius: 8px; overflow: hidden; background: var(--brand-bg-deep, #0c0a13); flex: none; }
.tp-vw-static, .tp-vw-anim { position: absolute; inset: 0; width: 120px; height: 120px; image-rendering: pixelated; image-rendering: crisp-edges; }
.tp-vw-anim { background-repeat: no-repeat; background-size: auto 120px; }
.tp-vw-anim--2 { animation: tp-vw-walk2 .6s steps(2) infinite; }
.tp-vw-anim--3 { animation: tp-vw-walk3 .9s steps(3) infinite; }
.tp-vw-anim--4 { animation: tp-vw-walk4 1.2s steps(4) infinite; }
@keyframes tp-vw-walk2 { from { background-position: 0 0; } to { background-position: -240px 0; } }
@keyframes tp-vw-walk3 { from { background-position: 0 0; } to { background-position: -360px 0; } }
@keyframes tp-vw-walk4 { from { background-position: 0 0; } to { background-position: -480px 0; } }
@media (prefers-reduced-motion: reduce) { .tp-vw-anim { display: none; } }
.tp-vw-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 12px 0 8px; padding: 0; }
.tp-vw-strip li { display: flex; gap: 6px; align-items: baseline; padding: 3px 9px; border-radius: 6px; background: rgb(255 255 255 / .04); border: 1px solid var(--brand-border, #3a3246); font-size: 13px; }
.tp-vw-strip b { color: var(--brand-accent, #e0b249); }
.tp-vw-strip .tp-vw-strip-note { border: 0; background: none; padding: 0; color: var(--brand-text-muted, #a79f8c); font-size: 12px; }
.tp-vw-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.tp-vw-cols ul { margin: 0; padding: 0; list-style: none; }
.tp-vw-cols li { position: relative; padding-left: 16px; font-size: 14px; }
.tp-vw-plus li::before { content: "+"; position: absolute; left: 0; color: #8fe39b; font-weight: 700; }
.tp-vw-minus li::before { content: "\2212"; position: absolute; left: 0; color: #f08a70; font-weight: 700; }
.tp-vw-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 12px 0; font-size: 14px; }
.tp-vw-facts dt { color: var(--brand-text-muted, #a79f8c); }
.tp-vw-facts dd { margin: 0; }
.tp-vw-spells { width: 100%; border-collapse: collapse; font-size: 13px; }
.tp-vw-spells th, .tp-vw-spells td { text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--brand-border, #3a3246); }
.tp-vw-spells code { color: var(--brand-accent, #e0b249); background: none; }
.tp-vw-map { margin: 0 0 10px; }
.tp-vw-map img { display: block; width: 100%; height: auto; image-rendering: pixelated; border-radius: 8px; border: 1px solid var(--brand-border, #3a3246); }
.tp-vw-link { color: var(--brand-accent, #e0b249); font-weight: 600; }
@media (max-width: 520px) {
  .tp-vw-card { padding: 12px; }
  .tp-vw-cols { grid-template-columns: 1fr; }
  .tp-vw-fig, .tp-vw-static, .tp-vw-anim { width: 96px; height: 96px; }
  .tp-vw-anim { background-size: auto 96px; }
  @keyframes tp-vw-walk2 { from { background-position: 0 0; } to { background-position: -192px 0; } }
  .tp-vw-spells thead { display: none; }
  .tp-vw-spells tr { display: block; padding: 6px 0; border-bottom: 1px solid var(--brand-border, #3a3246); }
  .tp-vw-spells td { display: flex; gap: 8px; border: 0; padding: 1px 0; }
  .tp-vw-spells td::before { content: attr(data-th); min-width: 84px; color: var(--brand-text-muted, #a79f8c); }
}