/*
 * 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);
  /* `uppercase` sets headings and titles in capitals. */
  --ttrpg-head-case: none;
  /* The title band (extra.ttrpg.title: banner): its grunge, pale smudges and
     dark specks over --ttrpg-band, and its torn bottom edge. Its colours,
     --ttrpg-band and --ttrpg-band-ink, and the colour of the thumb tabs,
     --ttrpg-tab, fall back to the header's. */
  --ttrpg-band-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.014' numOctaves='4' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .9 0 0 0 -.4'/%3E%3C/filter%3E%3Cfilter id='s' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3 0 0 0 1.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23c%29'/%3E%3Crect width='100%25' height='100%25' filter='url%28%23s%29' opacity='.5'/%3E%3C/svg%3E");
  --ttrpg-band-edge: polygon(0 0, 100% 0, 100.0% calc(100% - 0px), 97.9% calc(100% - 2px), 95.8% calc(100% - 5px), 93.8% calc(100% - 2px), 91.7% calc(100% - 5px), 89.6% calc(100% - 5px), 87.5% calc(100% - 6px), 85.4% calc(100% - 3px), 83.3% calc(100% - 13px), 81.2% calc(100% - 3px), 79.2% calc(100% - 12px), 77.1% calc(100% - 6px), 75.0% calc(100% - 5px), 72.9% calc(100% - 6px), 70.8% calc(100% - 3px), 68.8% calc(100% - 6px), 66.7% calc(100% - 1px), 64.6% calc(100% - 3px), 62.5% calc(100% - 7px), 60.4% calc(100% - 5px), 58.3% calc(100% - 0px), 56.2% calc(100% - 4px), 54.2% calc(100% - 3px), 52.1% calc(100% - 11px), 50.0% calc(100% - 2px), 47.9% calc(100% - 6px), 45.8% calc(100% - 1px), 43.8% calc(100% - 2px), 41.7% calc(100% - 3px), 39.6% calc(100% - 4px), 37.5% calc(100% - 2px), 35.4% calc(100% - 3px), 33.3% calc(100% - 4px), 31.2% calc(100% - 4px), 29.2% calc(100% - 5px), 27.1% calc(100% - 3px), 25.0% calc(100% - 2px), 22.9% calc(100% - 2px), 20.8% calc(100% - 3px), 18.8% calc(100% - 16px), 16.7% calc(100% - 1px), 14.6% calc(100% - 13px), 12.5% calc(100% - 2px), 10.4% calc(100% - 1px), 8.3% calc(100% - 15px), 6.2% calc(100% - 6px), 4.2% calc(100% - 6px), 2.1% calc(100% - 5px), 0.0% calc(100% - 0px));
  /* The shadow under a raised box (extra.ttrpg.boxes: cartouche). */
  --ttrpg-lift: rgba(40, 20, 5, 0.45);
  /* The portrait outside extra.ttrpg.portrait: box. The print's edge (a
     clip-path) and tilt, plain by default; the part of a cover kept in view. */
  --ttrpg-print-edge: none;
  --ttrpg-print-tilt: 0deg;
  --ttrpg-cover-focus: 50% 30%;
  /* 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;
  }
}

/* The space above and beside the text on phones, as tokens (the theme's
   0.6rem padding and 0.4rem spacer above, 0.8rem margins beside). */
.md-content__inner {
  --ttrpg-inner-top: 1rem;
  --ttrpg-inner-x: 0.8rem;
}

/* 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);
  }

  /* The space above and beside the text, as tokens: the title band bleeds
     into it. The top counts the theme's own 0.4rem spacer. */
  .md-content__inner {
    --ttrpg-inner-top: 3rem;
    --ttrpg-inner-x: 3.2rem;
    position: relative;
    margin: 0;
    padding: 2.6rem var(--ttrpg-inner-x) 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 {
    --ttrpg-inner-top: 3.8rem;
    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);
  text-transform: var(--ttrpg-head-case);
}

.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-transform: var(--ttrpg-head-case);
  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;
}

/* A glossary name that links to the codex: it reads as text, keeps the
   dotted underline of its tooltip, and shows it is a link on hover. */
.md-typeset a.ttrpg-codex-link {
  color: inherit;
  text-decoration: none;
}

.md-typeset a.ttrpg-codex-link:hover abbr,
.md-typeset a.ttrpg-codex-link:focus-visible abbr {
  color: var(--ttrpg-strong);
  text-decoration-style: solid;
}

.md-typeset a.ttrpg-codex-link abbr {
  cursor: pointer;
}

/* 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);
}

/* ---------- Codex page ---------- */

/* The page at extra.ttrpg.codex has the ttrpg-codex class, and is plain
   Markdown: the rules find its parts by structure. The index of kinds is
   the first paragraph after the title: one line of links, small caps. */
.ttrpg-codex .md-typeset :is(.ttrpg-head, .ttrpg-head + .ttrpg-tab) + p {
  margin: 0 auto 2.6em;
  text-align: center;
  color: var(--ttrpg-muted);
  font-size: 0.9em;
  font-variant: small-caps;
  letter-spacing: 0.1em;
}

.ttrpg-codex .md-typeset :is(.ttrpg-head, .ttrpg-head + .ttrpg-tab) + p a {
  color: var(--ttrpg-ink);
  text-decoration: none;
}

.ttrpg-codex .md-typeset :is(.ttrpg-head, .ttrpg-head + .ttrpg-tab) + p a:hover,
.ttrpg-codex .md-typeset :is(.ttrpg-head, .ttrpg-head + .ttrpg-tab) + p a:focus-visible {
  color: var(--ttrpg-strong);
}

/* One entry, one block: a hairline above each name, except the first of a
   section, which sits under the section heading and its anchors. Python-
   Markdown puts the anchors in a paragraph of their own. The name is the
   entry itself, so its tooltip is not marked. */
.ttrpg-codex .md-typeset h3 {
  border-top: 1px solid rgba(var(--ttrpg-ink-rgb), 0.12);
  padding-top: 0.9em;
  margin-top: 1.05em;
}

.ttrpg-codex .md-typeset h2 + h3,
.ttrpg-codex .md-typeset h2 + p:has(> a[id]:first-child) + h3 {
  border-top: 0;
  padding-top: 0;
}

.ttrpg-codex .md-typeset h3 abbr {
  text-decoration: none;
  cursor: inherit;
}

/* "Appears in": a label in bold, then links and nothing else. The links
   are a row of chips. The status line has no link, and a description has
   more than a label and links, so neither is touched. */
.ttrpg-codex .md-typeset p:has(> strong:first-child):has(> a):not(:has(> :not(strong, a))) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em 0.45em;
  align-items: baseline;
  font-size: 0.85em;
}

.ttrpg-codex .md-typeset p:has(> strong:first-child):has(> a):not(:has(> :not(strong, a))) strong {
  color: var(--ttrpg-muted);
  font-variant: small-caps;
  font-weight: 400;
  letter-spacing: 0.1em;
}

.ttrpg-codex .md-typeset p:has(> strong:first-child):has(> a):not(:has(> :not(strong, a))) a {
  padding: 0.08em 0.55em 0.12em;
  border-radius: 2px;
  background: var(--ttrpg-box);
  color: var(--ttrpg-ink);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.ttrpg-codex .md-typeset p:has(> strong:first-child):has(> a):not(:has(> :not(strong, a))) a:hover,
.ttrpg-codex .md-typeset p:has(> strong:first-child):has(> a):not(:has(> :not(strong, a))) a:focus-visible {
  color: var(--ttrpg-strong);
  box-shadow: inset 0 -2px 0 var(--ttrpg-brass);
}

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

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

.md-typeset :is(.ttrpg-head, .ttrpg-head + .ttrpg-tab) + 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);
  text-transform: var(--ttrpg-head-case);
  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;
  }
}

/* With extra.ttrpg.title: banner, the title block is a dark band across the
   top of the page, with a grunge texture and a torn bottom edge, as on the
   chapter openings of the Blades in the Dark manual. A session's number
   shows faintly in its corner. The band bleeds into the space around the
   text: the --ttrpg-inner-* tokens on the page measure it. */
.md-typeset .ttrpg-head--banner {
  position: relative;
  overflow: hidden;
  margin: calc(-1 * var(--ttrpg-inner-top)) calc(-1 * var(--ttrpg-inner-x)) 1.4em;
  padding: calc(var(--ttrpg-inner-top) + 0.3em) var(--ttrpg-inner-x) 1.7em;
  background:
    var(--ttrpg-band-texture) center / 340px repeat,
    var(--ttrpg-band, var(--ttrpg-bar));
  color: var(--ttrpg-band-ink, var(--ttrpg-bar-ink));
  clip-path: var(--ttrpg-band-edge);
}

.md-typeset .ttrpg-head--banner > * {
  position: relative;
  z-index: 1;
}

.md-typeset .ttrpg-head--banner h1 {
  margin: 0;
  color: inherit;
  font-size: 2.7em;
  line-height: 1;
}

.md-typeset .ttrpg-head--banner .ttrpg-eyebrow {
  color: color-mix(in srgb, currentColor 72%, transparent);
}

.md-typeset .ttrpg-head--banner[data-number]::after {
  content: attr(data-number);
  position: absolute;
  right: 0.25em;
  bottom: -0.3em;
  font-family: var(--ttrpg-head-font);
  font-size: 8.5em;
  line-height: 1;
  opacity: 0.07;
  pointer-events: none;
}

/* The edit and view buttons stay above the band. */
.ttrpg-banner .md-content__button {
  position: relative;
  z-index: 2;
  color: var(--ttrpg-band-ink, var(--ttrpg-bar-ink));
}

/* On wide screens the theme gives the text 1.2rem margins beside the
   sidebars, hidden here. The band and the tab reach the paper's edge, so they
   become padding: the text keeps its width. */
@media screen and (min-width: 76.25em) {
  [dir] .md-main__inner > .md-sidebar ~ .md-content:is(.ttrpg-banner, .ttrpg-tabs) > .md-content__inner {
    --ttrpg-inner-x: 4.4rem;
    margin-inline: 0;
  }
}

/* On phones the band runs from the header, edge to edge. */
@media screen and (max-width: 59.9375em) {
  .md-main__inner:has(> .md-content.ttrpg-banner) {
    margin-top: 0;
  }

  .ttrpg-banner .md-content__inner {
    margin-inline: var(--ttrpg-inner-x);
  }
}

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

  .md-typeset .ttrpg-head--banner[data-number]::after {
    font-size: 6.5em;
  }
}

/* With extra.ttrpg.tabs: thumb, a tab on the outer edge of the page names
   the section, or the session and its number, as the thumb tabs of the
   manual. It sits under the title block, from tablet width up, where the
   page is a sheet of paper: absolute, with no top, it stays where it is in
   the text. */
.md-typeset .ttrpg-tab {
  display: none;
}

@media screen and (min-width: 60em) {
  .ttrpg-tabs .md-typeset .ttrpg-tab {
    position: absolute;
    right: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    width: 1.6rem;
    padding: 0.4rem 0 1.5rem;
    background: var(--ttrpg-tab, var(--ttrpg-band, var(--ttrpg-bar)));
    color: var(--ttrpg-band-ink, var(--ttrpg-bar-ink));
    font-family: var(--ttrpg-head-font);
    font-size: 0.62rem;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: var(--ttrpg-head-case);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 0.8rem), 0 100%);
  }

  /* The point of the tab, in the ornament colour. */
  .ttrpg-tabs .md-typeset .ttrpg-tab::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 1.1rem;
    background: var(--ttrpg-brass);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 0.8rem), 0 100%);
  }

  .md-typeset .ttrpg-tab__number {
    font-size: 1.25em;
  }

  /* A slash under the number, as in the manual. */
  .md-typeset .ttrpg-tab__number::after {
    content: "";
    display: block;
    width: 1.6rem;
    height: 0.7rem;
    margin-top: 0.4rem;
    background: linear-gradient(to bottom left, transparent calc(50% - 0.5px), color-mix(in srgb, currentColor 60%, transparent) 50%, transparent calc(50% + 0.5px));
  }

  .md-typeset .ttrpg-tab__label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
  }
}

/* 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 :is(.ttrpg-head, .ttrpg-head + .ttrpg-tab) + p:has(> em:only-child) + p::first-letter {
  float: left;
  font-family: var(--ttrpg-head-font);
  color: var(--ttrpg-drop-cap, 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 :is(.ttrpg-head, .ttrpg-head + .ttrpg-tab) + 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;
}

/* With extra.ttrpg.boxes: headed, boxes hang from a dark bar, as the tables
   of the Blades in the Dark manual: the summary box's label becomes the bar,
   other boxes and table headers take its colour. */
.ttrpg-headed .md-typeset :is(.ttrpg-brief, blockquote, .ttrpg-infobox, .ttrpg-hub__session) {
  border-top: 0.35rem solid var(--ttrpg-tab, var(--ttrpg-band, var(--ttrpg-bar)));
  border-bottom: 2px solid var(--ttrpg-rule);
}

.ttrpg-headed .md-typeset .ttrpg-brief {
  border-top: 0;
  padding-top: 0;
}

.ttrpg-headed .md-typeset .ttrpg-brief__label {
  margin: 0 -1.375em 0.6em;
  padding: 0.35em 1.375em 0.25em;
  background: var(--ttrpg-tab, var(--ttrpg-band, var(--ttrpg-bar)));
  color: var(--ttrpg-band-ink, var(--ttrpg-bar-ink));
  font-size: 0.8em;
  letter-spacing: 0.08em;
}

.ttrpg-headed .md-typeset table:not([class]) th {
  background: var(--ttrpg-tab, var(--ttrpg-band, var(--ttrpg-bar)));
  color: var(--ttrpg-band-ink, var(--ttrpg-bar-ink));
  border-bottom: 0;
  letter-spacing: 0.06em;
}

.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);
  text-transform: var(--ttrpg-head-case);
  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;
}

/* With extra.ttrpg.tabs: thumb, the session numbers are small tabs too. */
.ttrpg-tabs .md-typeset .ttrpg-timeline__number {
  justify-self: center;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.3rem;
  padding-bottom: 0.2rem;
  background: var(--ttrpg-tab, var(--ttrpg-band, var(--ttrpg-bar)));
  color: var(--ttrpg-band-ink, var(--ttrpg-bar-ink));
  font-size: 1.15em;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%);
}

.ttrpg-tabs .md-typeset ol.ttrpg-timeline > li::before {
  top: 2.6rem;
  width: 2px;
  margin-left: -0.5px;
}

.md-typeset .ttrpg-timeline__title {
  font-family: var(--ttrpg-head-font);
  text-transform: var(--ttrpg-head-case);
  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);
  text-transform: var(--ttrpg-head-case);
  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);
  text-transform: var(--ttrpg-head-case);
  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;
  text-transform: var(--ttrpg-head-case);
}

.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;
}

.md-typeset .ttrpg-party__frame,
.md-typeset .ttrpg-party__cut {
  display: block;
}

/* With extra.ttrpg.portrait other than box, the party's portraits are small
   prints, as the print on a character page: no inner rule, cut by the
   palette's edge, turned by its tilt (every other one the other way), with
   a shadow, and cropped of portrait_trim's border. */
.ttrpg-portraits .md-typeset .ttrpg-party__frame {
  filter: drop-shadow(0 0.5rem 0.7rem var(--ttrpg-lift));
  transform: rotate(var(--ttrpg-print-tilt));
}

.ttrpg-portraits .md-typeset .ttrpg-party li:nth-child(even) .ttrpg-party__frame {
  transform: rotate(calc(-0.8 * var(--ttrpg-print-tilt)));
}

.ttrpg-portraits .md-typeset .ttrpg-party__cut {
  overflow: hidden;
  clip-path: var(--ttrpg-print-edge);
}

.ttrpg-portraits .md-typeset :is(.ttrpg-party img, .ttrpg-party__monogram) {
  outline: none;
}

.ttrpg-portraits .md-typeset .ttrpg-party img {
  object-position: 50% 20%;
  transform: scale(var(--ttrpg-portrait-zoom, 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;
  }
}

/* With extra.ttrpg.portrait: cover, print or auto, the portrait is a figure
   under the title, linked to itself so it opens full screen. Any frame is
   left to the picture; --ttrpg-portrait-zoom, from portrait_trim, crops a
   border off its edges. */
.md-typeset .ttrpg-figure {
  display: block;
  width: auto;
  max-width: none;
  margin: 0;
}

.md-typeset .ttrpg-figure__frame {
  display: block;
  overflow: hidden;
}

.md-typeset .ttrpg-figure img {
  display: block;
  width: 100%;
  transform: scale(var(--ttrpg-portrait-zoom, 1));
}

/* The cover: across the page, edge to edge, fading into the paper. Under a
   title band it starts beneath the band's torn edge. */
.md-typeset .ttrpg-figure--cover {
  position: relative;
  margin: 0 calc(-1 * var(--ttrpg-inner-x)) 1.2em;
}

.md-typeset .ttrpg-figure--cover .ttrpg-figure__frame {
  aspect-ratio: 21 / 9;
}

.md-typeset .ttrpg-figure--cover img {
  height: 100%;
  object-fit: cover;
  object-position: var(--ttrpg-cover-focus);
}

.md-typeset .ttrpg-figure--cover::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  background: linear-gradient(to bottom, transparent, var(--ttrpg-paper));
  pointer-events: none;
}

.md-typeset .ttrpg-head--banner:has(~ .ttrpg-figure--cover) {
  z-index: 1;
}

.md-typeset .ttrpg-head--banner ~ .ttrpg-figure--cover {
  margin-top: calc(-1.4em - 1.2rem);
}

/* The print: beside the text, cut by the palette's --ttrpg-print-edge,
   turned by --ttrpg-print-tilt, with a shadow under it. A tall or square
   picture gets a narrower one. An identity box goes under it. */
.md-typeset .ttrpg-figure--print {
  float: right;
  width: 15rem;
  margin: 0.4em 0 1.2em 1.8em;
  filter: drop-shadow(0 0.7rem 0.9rem var(--ttrpg-lift));
  transform: rotate(var(--ttrpg-print-tilt));
}

.md-typeset .ttrpg-figure--print[data-shape="tall"] {
  width: 12rem;
}

.md-typeset .ttrpg-figure--print .ttrpg-figure__frame {
  clip-path: var(--ttrpg-print-edge);
}

.md-typeset .ttrpg-figure--print ~ .ttrpg-infobox {
  clear: right;
}

@media screen and (max-width: 44.9375em) {
  .md-typeset .ttrpg-figure--cover .ttrpg-figure__frame {
    aspect-ratio: 16 / 10;
  }

  .md-typeset .ttrpg-figure--print {
    float: none;
    width: 75%;
    margin: 0.4em auto 1.6em;
  }

  .md-typeset .ttrpg-figure--print[data-shape="tall"] {
    width: 60%;
  }
}

/* The name, not the picture's frame, is underlined. */
.md-typeset .ttrpg-party a:hover > span:last-child,
.md-typeset .ttrpg-party a:focus-visible > span:last-child {
  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;
}