/*
 * zensical-ttrpg: a theme for tabletop RPG campaign sites, on top of
 * Zensical's classic variant. Inspired by the torillic theme for MkDocs.
 *
 * This file only reads --ttrpg-* tokens; a palette sets them (see
 * palettes/marina.css). Brass (--ttrpg-brass) is too faint on paper for
 * text: it is used for rules, underlines and ornaments only.
 */

/* Defaults for tokens a palette may leave out. The heading font is set by
   the template from extra.ttrpg.heading_font. */
:root {
  --ttrpg-head-font: Georgia, serif;
  --ttrpg-text-size: clamp(17px, 0.9rem, 19px);
  --ttrpg-backdrop-texture: none;
  --ttrpg-backdrop-size: 560px;
  /* Scene breaks (---) take turns between these two glyphs. */
  --ttrpg-ornament-1: "\2766";
  --ttrpg-ornament-2: "\2766";
  /* Paper grain (generated noise, warm) and the shadow at the page edges. */
  --ttrpg-paper-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .2 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --ttrpg-vignette: rgba(80, 55, 25, 0.18);
  /* h2 to h4: the heading font, unless extra.ttrpg.subheading_font is set. */
  --ttrpg-subhead-font: var(--ttrpg-head-font);
  /* The shadow under a raised box (extra.ttrpg.boxes: cartouche). */
  --ttrpg-lift: rgba(40, 20, 5, 0.45);
  /* Filigree for the corners of the page (extra.ttrpg.corners: filigree) and
     of the boxes (boxes: cartouche). Each is one image holding all four
     corners, used as a mask: the colour comes from --ttrpg-brass. */
  --ttrpg-corners: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='120' y2='0'%3E%3Cstop offset='.25' stop-color='%23000'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cg id='s'%3E%3Cpath d='M4 4H120' stroke='url(%23f)' stroke-width='2.2'/%3E%3Cpath d='M11 11H92' stroke='url(%23f)' stroke-width='.9'/%3E%3Cpath d='M22 18C34 29 50 29 57 20C61 13 55 6 48 10C43 13 46 20 51 17' stroke='%23000' stroke-width='2.2'/%3E%3Cpath d='M57 20C68 31 84 27 106 18' stroke='url(%23f)' stroke-width='1.5'/%3E%3Cpath d='M70 25C77 15 90 13 97 17C89 23 80 27 70 25Z' fill='%23000'/%3E%3Cpath d='M36 26C40 33 38 40 32 44' stroke='%23000' stroke-width='1.3'/%3E%3C/g%3E%3Csymbol id='c' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cuse href='%23s'/%3E%3Cuse href='%23s' transform='matrix(0 1 1 0 0 0)'/%3E%3Cpath d='M21 21L37 37' stroke='%23000' stroke-width='1.8'/%3E%3C/g%3E%3Ccircle cx='15' cy='15' r='4.6'/%3E%3Cpath d='M35 35L46 39L51 51L39 46Z'/%3E%3C/symbol%3E%3C/defs%3E%3Cuse href='%23c' width='100' height='100'/%3E%3Csvg x='100%25' overflow='visible'%3E%3Cuse href='%23c' width='100' height='100' transform='scale(-1 1)'/%3E%3C/svg%3E%3Csvg y='100%25' overflow='visible'%3E%3Cuse href='%23c' width='100' height='100' transform='scale(1 -1)'/%3E%3C/svg%3E%3Csvg x='100%25' y='100%25' overflow='visible'%3E%3Cuse href='%23c' width='100' height='100' transform='scale(-1 -1)'/%3E%3C/svg%3E%3C/svg%3E");
  --ttrpg-box-corners: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='120' y2='0'%3E%3Cstop offset='.25' stop-color='%23000'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cg id='s'%3E%3Cpath d='M4 4H120' stroke='url(%23f)' stroke-width='2.2'/%3E%3Cpath d='M11 11H92' stroke='url(%23f)' stroke-width='.9'/%3E%3Cpath d='M22 18C34 29 50 29 57 20C61 13 55 6 48 10C43 13 46 20 51 17' stroke='%23000' stroke-width='2.2'/%3E%3Cpath d='M57 20C68 31 84 27 106 18' stroke='url(%23f)' stroke-width='1.5'/%3E%3Cpath d='M70 25C77 15 90 13 97 17C89 23 80 27 70 25Z' fill='%23000'/%3E%3Cpath d='M36 26C40 33 38 40 32 44' stroke='%23000' stroke-width='1.3'/%3E%3C/g%3E%3Csymbol id='c' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cuse href='%23s'/%3E%3Cuse href='%23s' transform='matrix(0 1 1 0 0 0)'/%3E%3Cpath d='M21 21L37 37' stroke='%23000' stroke-width='1.8'/%3E%3C/g%3E%3Ccircle cx='15' cy='15' r='4.6'/%3E%3Cpath d='M35 35L46 39L51 51L39 46Z'/%3E%3C/symbol%3E%3C/defs%3E%3Cuse href='%23c' width='30' height='30'/%3E%3Csvg x='100%25' overflow='visible'%3E%3Cuse href='%23c' width='30' height='30' transform='scale(-1 1)'/%3E%3C/svg%3E%3Csvg y='100%25' overflow='visible'%3E%3Cuse href='%23c' width='30' height='30' transform='scale(1 -1)'/%3E%3C/svg%3E%3Csvg x='100%25' y='100%25' overflow='visible'%3E%3Cuse href='%23c' width='30' height='30' transform='scale(-1 -1)'/%3E%3C/svg%3E%3C/svg%3E");
}

/* ---------- Tokens handed to the theme ---------- */
[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {

  --md-default-bg-color: var(--ttrpg-paper);
  --md-default-fg-color: rgba(var(--ttrpg-ink-rgb), 0.92);
  --md-default-fg-color--light: rgba(var(--ttrpg-ink-rgb), 0.66);
  --md-default-fg-color--lighter: rgba(var(--ttrpg-ink-rgb), 0.36);
  --md-default-fg-color--lightest: rgba(var(--ttrpg-ink-rgb), 0.14);
  --md-typeset-color: var(--ttrpg-ink);
  --md-typeset-a-color: var(--ttrpg-head);
  --md-primary-fg-color: var(--ttrpg-bar);
  --md-primary-fg-color--light: var(--ttrpg-bar);
  --md-primary-fg-color--dark: var(--ttrpg-bar);
  --md-primary-bg-color: var(--ttrpg-bar-ink);
  --md-primary-bg-color--light: var(--ttrpg-bar-ink);
  --md-accent-fg-color: var(--ttrpg-strong);
  --md-accent-fg-color--transparent: color-mix(in srgb, var(--ttrpg-brass) 18%, transparent);
  --md-accent-bg-color: var(--ttrpg-paper);
  --md-footer-bg-color: var(--ttrpg-bar);
  --md-footer-bg-color--dark: color-mix(in srgb, var(--ttrpg-bar) 80%, black);
  --md-footer-fg-color: var(--ttrpg-bar-ink);
  --md-footer-fg-color--light: color-mix(in srgb, var(--ttrpg-bar-ink) 70%, transparent);
  --md-footer-fg-color--lighter: color-mix(in srgb, var(--ttrpg-bar-ink) 45%, transparent);
  --md-code-bg-color: var(--ttrpg-box);
  --md-code-fg-color: var(--ttrpg-ink);
  --md-typeset-table-color: rgba(var(--ttrpg-ink-rgb), 0.14);
}

/* ---------- Layout: one column, no sidebars ---------- */

/* The table of contents is never shown. The theme shows it from tablet width
   up with a rule of its own, hence the longer selector. */
.md-main__inner > .md-sidebar.md-sidebar--secondary {
  display: none;
}

/* On wide screens the tabs carry the menu; below that the sidebar is the
   drawer behind the menu button, so it must stay. */
@media screen and (min-width: 76.25em) {
  .md-main__inner > .md-sidebar.md-sidebar--primary {
    display: none;
  }
}

/* From tablet width up, the page is a sheet of paper on the backdrop. */
@media screen and (min-width: 60em) {
  .md-main {
    background:
      var(--ttrpg-backdrop-texture) 0 0 / var(--ttrpg-backdrop-size) repeat fixed,
      radial-gradient(120% 90% at 30% 0%, var(--ttrpg-backdrop-1), var(--ttrpg-backdrop-2) 75%) fixed;
  }

  .md-main__inner {
    margin-top: 0;
    justify-content: center;
  }

  .md-content {
    position: relative;
    flex: 0 1 38rem;
    margin: 2rem 0 3rem;
    background-color: var(--ttrpg-paper);
    box-shadow:
      0 1px 0 rgba(0, 0, 0, 0.25),
      0 26px 50px -14px rgba(0, 0, 0, 0.6);
  }

  /* Paper grain: generated noise, no image to download. */
  .md-content::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: var(--ttrpg-paper-texture);
    opacity: var(--ttrpg-grain);
    mix-blend-mode: var(--ttrpg-grain-blend);
    box-shadow: inset 0 0 70px var(--ttrpg-vignette);
  }

  .md-content__inner {
    position: relative;
    margin: 0;
    padding: 2.6rem 3.2rem 2rem;
  }

  /* With extra.ttrpg.corners: filigree, an ornament in each corner of the
     sheet, and a little more room for them above and below the text. */
  .md-content.ttrpg-corners::after {
    content: "";
    position: absolute;
    inset: 10px;
    pointer-events: none;
    background: var(--ttrpg-brass);
    -webkit-mask: var(--ttrpg-corners) 0 0 / 100% 100% no-repeat;
    mask: var(--ttrpg-corners) 0 0 / 100% 100% no-repeat;
  }

  .md-content.ttrpg-corners .md-content__inner {
    padding-top: 3.4rem;
    padding-bottom: 3rem;
  }
}

/* ---------- Header, tabs, footer ---------- */
.md-header__topic,
.md-footer__title,
.md-nav__title {
  font-family: var(--ttrpg-head-font);
}

.md-header__topic:first-child {
  font-weight: 400;
}

.md-tabs__link {
  font-size: 0.8rem;
  opacity: 0.78;
}

.md-tabs__item--active .md-tabs__link {
  opacity: 1;
  text-decoration: underline 2px var(--ttrpg-brass);
  text-underline-offset: 0.55em;
}

.md-footer__direction {
  font-variant: small-caps;
  letter-spacing: 0.06em;
}

/* ---------- Text ---------- */
.md-typeset {
  font-size: var(--ttrpg-text-size);
  line-height: 1.6;
  hyphens: auto;
}

.md-typeset p,
.md-typeset ul,
.md-typeset ol {
  max-width: 68ch;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: var(--ttrpg-head-font);
  font-weight: 400;
  color: var(--ttrpg-head);
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: var(--ttrpg-subhead-font);
}

.md-typeset h1 {
  font-size: 2.4em;
  line-height: 1.05;
  margin: 0 0 0.4em;
}

.md-typeset h2 {
  font-size: 1.6em;
  line-height: 1.15;
}

.md-typeset h3 {
  font-size: 1.3em;
  line-height: 1.2;
  margin: 1.4em 0 0.5em;
}

.md-typeset h4 {
  font-size: 1.1em;
  border-bottom: 1px solid var(--ttrpg-brass);
  padding-bottom: 0.1em;
}

/* With extra.ttrpg.subheadings: rubric, h2 to h4 are rubrics, as in an old
   manual: smaller, in the bold colour, over a dark rule. Only the page's own
   headings; the home page's section titles keep their look. They wrap as
   text does, filling the line over the rule, with no word left alone. */
.ttrpg-rubrics .md-typeset > :is(h2, h3, h4) {
  text-wrap: pretty;
  color: var(--ttrpg-strong);
  font-size: 1.15em;
  line-height: 1.25;
  letter-spacing: 0.03em;
  padding-bottom: 0.12em;
  border-bottom: 1.5px solid rgba(var(--ttrpg-ink-rgb), 0.7);
}

.ttrpg-rubrics .md-typeset > h2 {
  font-size: 1.3em;
}

.ttrpg-rubrics .md-typeset > h4 {
  font-size: 1.05em;
}

.md-typeset strong {
  color: var(--ttrpg-strong);
}

.md-typeset a {
  text-decoration: underline 1px var(--ttrpg-brass);
  text-underline-offset: 0.2em;
}

.md-typeset a:hover,
.md-typeset a:focus-visible {
  color: var(--ttrpg-strong);
  text-decoration-thickness: 2px;
}

.md-typeset li::marker {
  color: var(--ttrpg-strong);
}

/* NPC names from the glossary: hover or focus shows who they are. */
.md-typeset abbr {
  text-decoration: underline dotted var(--ttrpg-brass);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  border-bottom: 0;
  cursor: help;
}

/* The tooltip itself: readable, on paper, with a brass edge. */
.md-tooltip2 {
  --md-tooltip-width: 17rem;
}

.md-tooltip2[role="tooltip"] > .md-tooltip2__inner {
  padding: 0.55em 0.8em 0.6em;
  border-top: 3px solid var(--ttrpg-rule);
  color: var(--ttrpg-ink);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

/* ---------- Session pages ---------- */

/* The date line under a session title ("*06.06.2025*"). */
.md-typeset .ttrpg-head + p:has(> em:only-child) {
  margin-top: -0.3em;
  color: var(--ttrpg-muted);
  font-variant: small-caps;
  letter-spacing: 0.08em;
}

.md-typeset .ttrpg-head + p:has(> em:only-child) em {
  font-style: normal;
}

/* With front matter: "Session 15 · 6 June 2025" above the title, and the
   excerpt in a summary box under it. A date line written in the page stays
   where it is: remove it from the page if the front matter has the date. */
.md-typeset .ttrpg-eyebrow {
  margin: 0 0 0.2em;
  color: var(--ttrpg-muted);
  font-variant: small-caps;
  letter-spacing: 0.08em;
  font-variant-numeric: lining-nums;
}

.md-typeset .ttrpg-brief {
  background: var(--ttrpg-box);
  border-block: 3px solid var(--ttrpg-rule);
  padding: 0.8em 1.1em;
  margin: 0 0 1.6em;
}

.md-typeset .ttrpg-brief__label {
  display: block;
  font-family: var(--ttrpg-head-font);
  color: var(--ttrpg-strong);
  letter-spacing: 0.04em;
}

.md-typeset .ttrpg-brief p {
  margin: 0;
  font-size: 0.95em;
}

/* The title block: <header class="ttrpg-head"> around the page's h1, with
   the session line above it. With extra.ttrpg.title: centered it is centred,
   the session line gets a rule on each side, and a brushed rule runs under
   the title, as on a book's chapter opening. */
.md-typeset .ttrpg-title-rule {
  display: none;
}

.md-typeset .ttrpg-head--centered {
  text-align: center;
}

.md-typeset .ttrpg-head--centered .ttrpg-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9em;
  white-space: nowrap;
}

/* The rules give way to the text: they shrink, the date never wraps. */
.md-typeset .ttrpg-head--centered .ttrpg-eyebrow::before,
.md-typeset .ttrpg-head--centered .ttrpg-eyebrow::after {
  content: "";
  flex: 0 1 8rem;
  min-width: 1rem;
  height: 2px;
  background: var(--ttrpg-brass);
  clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 60%);
}

.md-typeset .ttrpg-head--centered .ttrpg-eyebrow::before {
  clip-path: polygon(0 0, 100% 40%, 100% 60%, 0 100%);
}

.md-typeset .ttrpg-head--centered h1 {
  font-size: 2.7em;
  margin-bottom: 0.2em;
}

.md-typeset .ttrpg-head--centered .ttrpg-title-rule {
  display: block;
  width: min(78%, 24rem);
  height: 3px;
  margin: 0 auto 1.4em;
  background: var(--ttrpg-brass);
  clip-path: polygon(0 55%, 3% 30%, 12% 45%, 30% 10%, 50% 35%, 68% 5%, 86% 40%, 97% 25%, 100% 50%, 97% 80%, 80% 70%, 60% 100%, 42% 70%, 22% 95%, 8% 70%);
}

@media screen and (max-width: 44.9375em) {
  .md-typeset .ttrpg-head--centered h1 {
    font-size: 2.1em;
  }
}

/* Drop cap on the first paragraph of the story. */
.md-typeset .ttrpg-brief + p:not(:has(> em:only-child))::first-letter,
.md-typeset .ttrpg-brief + p:has(> em:only-child) + p::first-letter,
.md-typeset .ttrpg-head + p:has(> em:only-child) + p::first-letter {
  float: left;
  font-family: var(--ttrpg-head-font);
  color: var(--ttrpg-head);
  font-size: 3.7em;
  line-height: 0.8;
  padding: 0.07em 0.09em 0 0;
}

/* With extra.ttrpg.drop_cap: illuminated, the drop cap sits in a box with a
   double rule and an engraved crosshatch, as a printed initial. */
.ttrpg-illuminated .md-typeset .ttrpg-brief + p:not(:has(> em:only-child))::first-letter,
.ttrpg-illuminated .md-typeset .ttrpg-brief + p:has(> em:only-child) + p::first-letter,
.ttrpg-illuminated .md-typeset .ttrpg-head + p:has(> em:only-child) + p::first-letter {
  font-size: 3em;
  line-height: 1;
  margin: 0.16em 0.24em 0 0;
  padding: 0.12em 0.2em 0.08em;
  background:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--ttrpg-brass) 34%, transparent) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--ttrpg-brass) 34%, transparent) 0 1px, transparent 1px 6px),
    var(--ttrpg-box);
  border: 4px double var(--ttrpg-brass);
}

/* Scene breaks (---): the palette's two ornaments, taking turns. */
.md-typeset hr {
  display: block;
  width: 60%;
  height: auto;
  margin: 1.6em auto;
  border: 0;
  overflow: visible;
  text-align: center;
  line-height: 1;
  color: var(--ttrpg-brass);
  background:
    linear-gradient(to right, transparent, var(--ttrpg-brass)) left center / 42% 1px no-repeat,
    linear-gradient(to left, transparent, var(--ttrpg-brass)) right center / 42% 1px no-repeat;
}

.md-typeset hr::after {
  content: var(--ttrpg-ornament-1);
  font-size: 1.3em;
}

.md-typeset hr:nth-of-type(even)::after {
  content: var(--ttrpg-ornament-2);
}

/* ---------- Boxes and tables ---------- */
.md-typeset blockquote {
  background: var(--ttrpg-box);
  color: var(--ttrpg-ink);
  border: 0;
  border-block: 3px solid var(--ttrpg-rule);
  padding: 0.8em 1.1em;
  margin: 1.2em 0;
}

.md-typeset blockquote > :first-child {
  margin-top: 0;
}

.md-typeset blockquote > :last-child {
  margin-bottom: 0;
}

/* With extra.ttrpg.boxes: cartouche, the boxes are raised off the page
   instead of ruled: a thin inner frame, a shadow, and filigree corners. */
.ttrpg-cartouche .md-typeset :is(.ttrpg-brief, blockquote, .ttrpg-infobox, .ttrpg-hub__session) {
  position: relative;
  border: 0;
  outline: 1px solid color-mix(in srgb, var(--ttrpg-brass) 55%, transparent);
  outline-offset: -7px;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.1),
    0 16px 26px -14px var(--ttrpg-lift),
    0 2px 6px -2px var(--ttrpg-lift);
}

.ttrpg-cartouche .md-typeset :is(.ttrpg-brief, blockquote, .ttrpg-hub__session) {
  padding: 1.1em 1.6em 1em;
}

/* The identity box is narrow: enough room to clear the frame, no more. */
.ttrpg-cartouche .md-typeset .ttrpg-infobox {
  padding: 1em 1.1em;
}

.ttrpg-cartouche .md-typeset :is(.ttrpg-brief, blockquote, .ttrpg-infobox, .ttrpg-hub__session)::before {
  content: "";
  position: absolute;
  inset: 4px;
  pointer-events: none;
  opacity: 0.85;
  background: var(--ttrpg-brass);
  -webkit-mask: var(--ttrpg-box-corners) 0 0 / 100% 100% no-repeat;
  mask: var(--ttrpg-box-corners) 0 0 / 100% 100% no-repeat;
}

.ttrpg-cartouche .md-typeset .ttrpg-brief__label {
  margin-bottom: 0.3em;
  font-family: var(--ttrpg-subhead-font);
  letter-spacing: 0.14em;
  text-align: center;
}

.md-typeset table:not([class]) {
  font-size: 0.9em;
  border: 0;
  box-shadow: none;
}

.md-typeset table:not([class]) th {
  font-family: var(--ttrpg-head-font);
  font-weight: 400;
  color: var(--ttrpg-head);
  border-bottom: 2px solid var(--ttrpg-rule);
}

.md-typeset table:not([class]) tbody tr:nth-child(odd) {
  background: var(--ttrpg-box);
}

.md-typeset table:not([class]) tbody tr:hover {
  background: color-mix(in srgb, var(--ttrpg-brass) 16%, transparent);
  box-shadow: none;
}

/* ---------- Sessions timeline, newest first ---------- */
.md-typeset ol.ttrpg-timeline {
  list-style: none;
  margin: 1.4em 0 0;
  padding: 0;
  max-width: none;
}

.md-typeset ol.ttrpg-timeline > li {
  position: relative;
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 0 0.8rem;
  margin: 0;
  padding-bottom: 1.3em;
}

/* The rail joining one session to the next. */
.md-typeset ol.ttrpg-timeline > li::before {
  content: "";
  position: absolute;
  left: 1.3rem;
  top: 2.3em;
  bottom: 0.3em;
  width: 1px;
  background: var(--ttrpg-brass);
}

.md-typeset ol.ttrpg-timeline > li:last-child::before {
  display: none;
}

.md-typeset .ttrpg-timeline__number {
  font-family: var(--ttrpg-head-font);
  color: var(--ttrpg-head);
  font-size: 1.7em;
  line-height: 1.1;
  text-align: center;
}

.md-typeset .ttrpg-timeline__title {
  font-family: var(--ttrpg-head-font);
  font-size: 1.15em;
  line-height: 1.2;
  text-decoration: none;
}

.md-typeset .ttrpg-timeline__title:hover,
.md-typeset .ttrpg-timeline__title:focus-visible {
  text-decoration: underline 1px var(--ttrpg-brass);
}

.md-typeset .ttrpg-timeline__date {
  display: block;
  margin: 0.15em 0 0.25em;
  color: var(--ttrpg-muted);
  font-size: 0.82em;
  font-variant: small-caps;
  letter-spacing: 0.07em;
}

.md-typeset .ttrpg-timeline__excerpt {
  margin: 0;
  font-size: 0.92em;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.md-typeset .ttrpg-badge {
  display: inline-block;
  margin-left: 0.5em;
  vertical-align: 0.2em;
  padding: 0.3em 0.55em 0.2em;
  border-radius: 3px;
  background: var(--ttrpg-strong);
  color: var(--ttrpg-paper);
  font-size: 0.62em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- Page lists on section pages ---------- */
.md-typeset .ttrpg-contents ul {
  list-style: none;
  margin: 1.4em 0 0;
  padding: 0;
  max-width: none;
}

.md-typeset nav.ttrpg-contents ul li {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  margin: 0;
  padding: 0.45em 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ttrpg-brass) 40%, transparent);
}

.md-typeset .ttrpg-contents .ttrpg-number {
  flex: 0 0 1.8em;
  text-align: right;
  font-family: var(--ttrpg-head-font);
  color: var(--ttrpg-muted);
  font-variant-numeric: lining-nums tabular-nums;
}

.md-typeset .ttrpg-contents a {
  font-family: var(--ttrpg-head-font);
  font-size: 1.15em;
  text-decoration: none;
}

.md-typeset .ttrpg-contents a:hover,
.md-typeset .ttrpg-contents a:focus-visible {
  text-decoration: underline 1px var(--ttrpg-brass);
}

/* ---------- Character pages ---------- */

/* The identity box, with the portrait from the front matter on top. */
.md-typeset .ttrpg-infobox {
  float: right;
  width: 13.5rem;
  margin: 0.2em 0 1.2em 1.6em;
  padding: 0.8em;
  background: var(--ttrpg-box);
  border-block: 3px solid var(--ttrpg-rule);
  font-size: 0.88em;
  line-height: 1.4;
}

.md-typeset .ttrpg-portrait {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top;
  margin: 0 0 0.6em;
  outline: 1px solid var(--ttrpg-brass);
  outline-offset: -6px;
}

.md-typeset .ttrpg-infobox dl {
  margin: 0;
}

.md-typeset .ttrpg-infobox dt {
  margin-top: 0.55em;
  color: var(--ttrpg-muted);
  font-size: 0.85em;
  font-weight: 400;
  font-variant: small-caps;
  letter-spacing: 0.07em;
}

.md-typeset .ttrpg-infobox dl dd {
  margin: 0;
}

/* On narrow screens the box sits across the page: portrait on the left. */
@media screen and (max-width: 44.9375em) {
  .md-typeset .ttrpg-infobox {
    float: none;
    width: auto;
    margin: 0 0 1.4em;
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: 0 0.9em;
    align-items: start;
  }

  .md-typeset .ttrpg-portrait {
    margin: 0;
  }

  .md-typeset .ttrpg-infobox dt:first-child {
    margin-top: 0;
  }
}

/* A character's sayings. */
.md-typeset .ttrpg-quotes ul {
  list-style: none;
  margin: 0.4em 0 1em;
  padding: 0;
}

.md-typeset .ttrpg-quotes ul > li {
  margin: 0.45em 0;
  padding-left: 0.9em;
  border-left: 2px solid var(--ttrpg-brass);
  font-style: italic;
}

/* ---------- Home page ---------- */
.md-typeset .ttrpg-hub {
  display: grid;
  gap: 2em;
  margin-top: 1.8em;
}

.md-typeset .ttrpg-hub h2 {
  margin: 0 0 0.6em;
  padding-bottom: 0.25em;
  border-bottom: 1px solid color-mix(in srgb, var(--ttrpg-brass) 45%, transparent);
  color: var(--ttrpg-muted);
  font-size: 1.05em;
  letter-spacing: 0.08em;
}

.md-typeset .ttrpg-hub a {
  text-decoration: none;
}

.md-typeset .ttrpg-hub__session {
  display: grid;
  gap: 0.3em;
  padding: 1em 1.2em;
  background: var(--ttrpg-box);
  border-block: 3px solid var(--ttrpg-rule);
  color: var(--ttrpg-ink);
}

.md-typeset .ttrpg-hub__eyebrow {
  color: var(--ttrpg-muted);
  font-size: 0.85em;
  font-variant: small-caps;
  letter-spacing: 0.08em;
}

.md-typeset .ttrpg-hub__title {
  font-family: var(--ttrpg-head-font);
  color: var(--ttrpg-head);
  font-size: 1.55em;
  line-height: 1.15;
}

.md-typeset .ttrpg-hub__excerpt {
  font-size: 0.95em;
}

.md-typeset .ttrpg-hub__more {
  color: var(--ttrpg-strong);
  font-variant: small-caps;
  letter-spacing: 0.06em;
}

.md-typeset .ttrpg-hub__session:hover .ttrpg-hub__more,
.md-typeset .ttrpg-hub__session:focus-visible .ttrpg-hub__more {
  text-decoration: underline 1px var(--ttrpg-brass);
  text-underline-offset: 0.2em;
}

.md-typeset .ttrpg-hub ul.ttrpg-party {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1em;
  max-width: none;
  margin: 0;
  padding: 0;
}

.md-typeset .ttrpg-hub ul.ttrpg-party > li {
  margin: 0;
}

.md-typeset .ttrpg-party a {
  display: grid;
  gap: 0.4em;
  color: var(--ttrpg-head);
  font-family: var(--ttrpg-head-font);
  line-height: 1.2;
  text-align: center;
}

.md-typeset .ttrpg-party img,
.md-typeset .ttrpg-hub__map img {
  display: block;
  width: 100%;
  outline: 1px solid var(--ttrpg-brass);
  outline-offset: -6px;
}

.md-typeset .ttrpg-party img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top;
}

/* A character without a portrait: their initial, on a tinted card. */
.md-typeset .ttrpg-party__monogram {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  background: linear-gradient(160deg, color-mix(in srgb, var(--ttrpg-head) 28%, var(--ttrpg-paper)), color-mix(in srgb, var(--ttrpg-head) 68%, var(--ttrpg-paper)));
  outline: 1px solid var(--ttrpg-brass);
  outline-offset: -6px;
  color: var(--ttrpg-paper);
  font-family: var(--ttrpg-head-font);
  font-size: 3.2em;
  line-height: 1;
}

/* A portrait without an identity box: just the picture, beside the text. */
.md-typeset .ttrpg-infobox--portrait .ttrpg-portrait {
  margin: 0;
}

@media screen and (max-width: 44.9375em) {
  .md-typeset .ttrpg-infobox--portrait {
    display: block;
    width: 60%;
    margin-inline: auto;
  }
}

.md-typeset .ttrpg-party a:hover span,
.md-typeset .ttrpg-party a:focus-visible span {
  text-decoration: underline 1px var(--ttrpg-brass);
  text-underline-offset: 0.2em;
}

@media screen and (max-width: 30em) {
  .md-typeset .ttrpg-hub ul.ttrpg-party {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Image viewer (assets/javascripts/ttrpg-lightbox.js) ---------- */
.ttrpg-lightbox-open {
  overflow: hidden;
}

.ttrpg-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  background: rgba(5, 11, 19, 0.94);
  cursor: zoom-out;
  touch-action: none;
}

.ttrpg-lightbox--zoomed {
  cursor: grab;
}

.ttrpg-lightbox--zoomed:active {
  cursor: grabbing;
}

.ttrpg-lightbox__image {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  transform-origin: 0 0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  cursor: zoom-in;
  user-select: none;
}

.ttrpg-lightbox--zoomed .ttrpg-lightbox__image {
  cursor: inherit;
}

.ttrpg-lightbox__tools {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
}

.ttrpg-lightbox__tools button {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(233, 223, 198, 0.35);
  border-radius: 50%;
  background: rgba(14, 31, 51, 0.85);
  color: #f4ecd8;
  font: 400 24px/1 Georgia, serif;
  cursor: pointer;
}

.ttrpg-lightbox__tools button:hover {
  background: rgba(14, 31, 51, 1);
  border-color: #c9a45c;
}

.ttrpg-lightbox__tools button:focus-visible {
  outline: 2px solid #c9a45c;
  outline-offset: 2px;
}