/**
 * Revealer base stylesheet (theme-agnostic).
 *
 * Adapted from the white theme by Hakim El Hattab, http://hakim.se
 * Brand colours are exposed as `--rv-*` custom properties so individual
 * themes only need to override a handful of variables (see revealer.css,
 * ljp.css).
 */

section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
  color: #fff;
}

/*********************************************
 * GLOBAL STYLES
 *********************************************/
:root {
  /* reveal.js core variables */
  --r-background-color: #fff;
  --r-main-font: Helvetica, Arial, "Segoe UI", sans-serif;
  --r-main-font-size: 42px;
  --r-main-color: #222;
  --r-block-margin: 20px;
  --r-heading-margin: 0 0 20px 0;
  --r-heading-font: Helvetica, Arial, "Segoe UI", sans-serif;
  --r-heading-color: #222;
  --r-heading-line-height: 1.2;
  --r-heading-letter-spacing: normal;
  --r-heading-text-transform: none;
  --r-heading-text-shadow: none;
  --r-heading-font-weight: 600;
  --r-heading1-text-shadow: none;
  --r-heading1-size: 2.5em;
  --r-heading2-size: 1.6em;
  --r-heading3-size: 1.3em;
  --r-heading4-size: 1em;
  --r-code-font: monospace;
  --r-link-color: #2a76dd;
  --r-link-color-dark: #1a53a1;
  --r-link-color-hover: #6ca0e8;
  --r-selection-background-color: #98bdef;
  --r-selection-color: #fff;

  /* Revealer branding variables (neutral defaults) */
  --rv-h1-color: #1a1a1a;
  --rv-h2-color: #555;
  --rv-header-bg: #f5f5f5;
  --rv-header-color: #222;
  --rv-header-border: 1px dashed #bbb;
  --rv-highlight-bg: #f0f0f5;
  --rv-highlight-border: 1px dotted #aaa;
  --rv-dark-bg: #111;
  --rv-dark-fixed-bg: #1f1f1f;
  --rv-dark-color: #f1f1f1;
}

.reveal-viewport {
  background: #fff;
  background-color: var(--r-background-color);
}

.reveal {
  font-family: var(--r-main-font);
  font-size: var(--r-main-font-size);
  font-weight: normal;
  color: var(--r-main-color);
}

.reveal ::selection {
  color: var(--r-selection-color);
  background: var(--r-selection-background-color);
  text-shadow: none;
}

.reveal ::-moz-selection {
  color: var(--r-selection-color);
  background: var(--r-selection-background-color);
  text-shadow: none;
}

.reveal .slides section,
.reveal .slides section > section {
  line-height: 1.3;
  font-weight: inherit;
}

/*********************************************
 * HEADERS
 *********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  margin: var(--r-heading-margin);
  color: var(--r-heading-color);
  font-family: var(--r-heading-font);
  font-weight: var(--r-heading-font-weight);
  line-height: var(--r-heading-line-height);
  letter-spacing: var(--r-heading-letter-spacing);
  text-transform: var(--r-heading-text-transform);
  text-shadow: var(--r-heading-text-shadow);
  word-wrap: break-word;
}

.reveal h1 {
  font-size: var(--r-heading1-size);
}

.reveal h2 {
  font-size: var(--r-heading2-size);
}

.reveal h3 {
  font-size: var(--r-heading3-size);
}

.reveal h4 {
  font-size: var(--r-heading4-size);
}

.reveal h1 {
  text-shadow: var(--r-heading1-text-shadow);
}

/*********************************************
 * OTHER
 *********************************************/
.reveal p {
  margin: var(--r-block-margin) 0;
  line-height: 1.3;
}

.reveal h1:last-child,
.reveal h2:last-child,
.reveal h3:last-child,
.reveal h4:last-child,
.reveal h5:last-child,
.reveal h6:last-child {
  margin-bottom: 0;
}

.reveal img,
.reveal video,
.reveal iframe {
  max-width: 95%;
  max-height: 95%;
}

.reveal strong,
.reveal b {
  font-weight: bold;
}

.reveal em {
  font-style: italic;
}

.reveal ol,
.reveal dl,
.reveal ul {
  display: inline-block;
  text-align: left;
  margin: 0 0 0 1em;
}

.reveal ol {
  list-style-type: decimal;
}

.reveal ul {
  list-style-type: disc;
}

.reveal ul ul {
  list-style-type: square;
}

.reveal ul ul ul {
  list-style-type: circle;
}

.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
  display: block;
  margin-left: 40px;
}

.reveal dt {
  font-weight: bold;
}

.reveal dd {
  margin-left: 40px;
}

.reveal blockquote {
  display: block;
  position: relative;
  width: 70%;
  margin: var(--r-block-margin) auto;
  padding: 5px;
  font-style: italic;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}

.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
  display: inline-block;
}

.reveal q {
  font-style: italic;
}

.reveal pre {
  display: block;
  position: relative;
  width: 90%;
  margin: var(--r-block-margin) auto;
  text-align: left;
  font-size: 0.55em;
  font-family: var(--r-code-font);
  line-height: 1.2em;
  word-wrap: break-word;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}

.reveal code {
  font-family: var(--r-code-font);
  tab-size: 2;
}

.reveal pre code {
  display: block;
  padding: 5px;
  overflow: auto;
  max-height: 400px;
  word-wrap: normal;
}

.reveal .code-wrapper {
  white-space: normal;
}

.reveal .code-wrapper code {
  white-space: pre;
}

code:not(.codeblock) {
  border-radius: 10px;
  padding: 3px 12px;
  font-size: 0.7em;
  background: lightgray;
}

.reveal table {
  margin: auto;
  border-collapse: collapse;
  border-spacing: 0;
}

.reveal table th {
  font-weight: bold;
}

.reveal table th,
.reveal table td {
  text-align: left;
  padding: 0.2em 0.5em 0.2em 0.5em;
  border-bottom: 1px solid;
}

.reveal table th[align=center],
.reveal table td[align=center] {
  text-align: center;
}

.reveal table th[align=right],
.reveal table td[align=right] {
  text-align: right;
}

.reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
  border-bottom: none;
}

.reveal sup {
  vertical-align: super;
  font-size: smaller;
}

.reveal sub {
  vertical-align: sub;
  font-size: smaller;
}

.reveal small {
  display: inline-block;
  font-size: 0.6em;
  line-height: 1.2em;
  vertical-align: top;
}

.reveal small * {
  vertical-align: top;
}

.reveal img {
  margin: var(--r-block-margin) 0;
}

/*********************************************
 * LINKS
 *********************************************/
.reveal a {
  color: var(--r-link-color);
  text-decoration: none;
  transition: color 0.15s ease;
}

.reveal a:hover {
  color: var(--r-link-color-hover);
  text-shadow: none;
  border: none;
}

.reveal .roll span:after {
  color: #fff;
  background: var(--r-link-color-dark);
}

/*********************************************
 * Frame helper
 *********************************************/
.reveal .r-frame {
  border: 4px solid var(--r-main-color);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

.reveal a .r-frame {
  transition: all 0.15s linear;
}

.reveal a:hover .r-frame {
  border-color: var(--r-link-color);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}

/*********************************************
 * NAVIGATION CONTROLS
 *********************************************/
.reveal .controls {
  color: var(--r-link-color);
}

/*********************************************
 * PROGRESS BAR
 *********************************************/
.reveal .progress {
  background: rgba(0, 0, 0, 0.2);
  color: var(--r-link-color);
}

/*********************************************
 * PRINT BACKGROUND
 *********************************************/
@media print {
  .backgrounds {
    background-color: var(--r-background-color);
  }
}

/*********************************************
 * REVEALER CUSTOMIZATION
 *********************************************/

header {
  display: block;
  position: absolute !important;
  top: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  left: 0 !important;
  right: 0 !important;
  text-align: center !important;

  background-color: var(--rv-header-bg);
  color: var(--rv-header-color);
  border-bottom: var(--rv-header-border);
  font-size: 5vh;
  padding: 10px 0;
  font-family: var(--r-heading-font);
  font-weight: var(--r-heading-font-weight);
  word-wrap: break-word;
}

footer {
  display: none;
  position: absolute !important;
  bottom: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  left: 0 !important;
  right: 0 !important;
  text-align: center !important;

  background-color: var(--rv-header-bg);
  color: var(--rv-header-color);
  border-top: var(--rv-header-border);
  font-size: 2.5vh;
  padding: 2% 0;
  font-family: var(--r-heading-font);
  word-wrap: break-word;
}

.slide_header, .slide_footer {
  display: none;
}

/*********************************************
 * SLIDE CONTENT LAYOUT
 *
 * Every slide's visible body is wrapped in
 * `.rv-content > .rv-content-inner`. The runtime (revealer.js) positions
 * `.rv-content` in the area left free by the fixed header/footer (with a
 * light margin on the four edges) and rescales `.rv-content-inner` so the
 * whole body always fits without overflowing or overlapping the header.
 *********************************************/
.reveal .slides > section,
.reveal .slides > section > section {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

.reveal .slides section > .rv-content {
  position: absolute;
  box-sizing: border-box;
  /* left / top / width / height are set by the runtime; these are fallbacks */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.reveal .slides section > .rv-content > .rv-content-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  transform-origin: center center;
}

/* Every slide body is a row of blocks (columns) filling the central area. */
.rv-content-inner > .multi-column {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  gap: var(--rv-column-spacing, 5%);
  padding: 0 var(--rv-column-spacing, 5%);
}

.rv-content-inner > .multi-column > .column {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  font-size: calc(1em * var(--rv-fontscale, 1));
}

/* reveal.css transitions ALL properties on fragments (`transition: all .2s`),
   so a `--rv-fontscale` change would reach the layout ~200ms late: a fit pass
   landing mid-fade reads a stale height on every probe of its search and
   either collapses the scale to its floor or false-fits an overflowing block.
   Fragments only ever animate paint — fades, grow/zoom transforms, highlight
   colours — never layout, so restrict their transitions accordingly: font and
   geometry changes always apply synchronously. */
.reveal .slides section .fragment {
  transition-property: opacity, visibility, transform, color, background-color,
    fill, stroke, box-shadow, filter;
}

/* While the runtime measures (fitSlide sets html.rv-measuring), no transition
   or animation from any stylesheet may delay layout changes: each probe must
   read its own effect. Paint-only properties stay animatable so a concurrent
   re-fit does not snap in-flight fades (fragments, `> animate:` SVG steps). */
html.rv-measuring .reveal .slides section,
html.rv-measuring .reveal .slides section *,
html.rv-measuring body > header,
html.rv-measuring body > footer {
  transition-property: opacity, visibility, transform, color, background-color,
    fill, stroke, stroke-width, stroke-dashoffset, box-shadow, filter !important;
  animation-play-state: paused !important;
}

/* Paragraphs stack vertically with a spacing a bit larger than a line break. */
.rv-content-inner .rv-paragraph {
  width: 100%;
  box-sizing: border-box;
}

.rv-content-inner .rv-paragraph + .rv-paragraph {
  /* Spacing expressed in line-heights (interligne): factor * 1lh. */
  margin-top: calc(var(--rv-para-spacing, 0.5) * 1lh);
}

/* Collapse the outer margins of each paragraph's first/last child so the gap
   between paragraphs is always exactly the paragraph spacing, regardless of the
   content types (text, list, image, heading...). */
.rv-content-inner .rv-paragraph > :first-child {
  margin-top: 0;
}

.rv-content-inner .rv-paragraph > :last-child {
  margin-bottom: 0;
}

.rv-content-inner .rv-paragraph > br:last-child {
  display: none;
}

/* Inside blocks, spacings are expressed in em so the per-block font scaling
   (`--rv-fontscale`) shrinks them together with the text. */
.rv-content-inner .column p {
  margin: 0.4em 0;
}

/* Block images/videos fill the block width by default and scale together with
   the block font, so an image-heavy block shrinks as a whole to fit. They stay
   resizable with an explicit width (e.g. `<img ... style="width: 60%">`). */
.rv-content-inner .rv-paragraph > img,
.rv-content-inner .rv-paragraph > video,
.rv-content-inner .rv-paragraph > p > img,
.rv-content-inner .rv-paragraph > p > video {
  display: inline-block;
  width: calc(100% * var(--rv-fontscale, 1));
  height: auto;
  max-width: 100%;
  max-height: none;
  margin: 0.4em 0;
  object-fit: contain;
}

#hlogos {
  display: none;
  justify-content: space-between;
  position: absolute !important;
  top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 10px 0;
  left: 0 !important;
  right: 0 !important;
  text-align: center !important;

  background-color: var(--rv-header-bg);
  border-bottom: var(--rv-header-border);
}

#hlogos img {
  height: 50px;
  padding: 5px 25px;
}

.reveal h1 {
  color: var(--rv-h1-color);
  font-size: 2em;
}

.reveal h2 {
  color: var(--rv-h2-color);
  font-size: 1.5em;
}

#event {
  margin: 20px 0 0 0;
  color: grey;
}

.rv-author-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.8em;
  width: min(90%, 820px);
  margin: 0.5em auto 0;
  align-items: start;
}

.rv-author-card {
  display: grid;
  gap: 0.35em;
  justify-items: center;
  font-size: 0.72em;
  line-height: 1.15;
}

.rv-author-photo {
  width: 105px;
  height: 105px;
  border-radius: 0;
  object-fit: cover;
  background: #ddd;
}

.rv-author-photos-rounded .rv-author-photo {
  border-radius: 50%;
}

.rv-author-photo-missing {
  display: grid;
  place-items: center;
  color: #666;
  font-family: var(--r-heading-font);
}

.rv-author-name {
  max-width: 140px;
}

.rv-align {
  width: 100%;
}

.rv-align-left {
  text-align: left;
}

.rv-align-center {
  text-align: center;
}

.rv-align-right {
  text-align: right;
}

.rv-align-justify {
  text-align: justify;
}

.multi-column {
  display: flex;
  gap: 5%;
  align-items: stretch;
  justify-content: stretch;
  width: 100%;
  box-sizing: border-box;
}

.column {
  flex: 1 1 0;
  min-width: 0;
}

/* In columns, lists stay on their own line (block) instead of flowing
   inline next to the preceding text. */
.multi-column .column ul.rv-list,
.multi-column .column ol {
  display: block;
}

.biblio-short {
  float: left;
  width: 45%;
  font-size: 0.72em;
  line-height: 1.2em;
  text-align: left;
  margin-left: 5%;
}

.biblio-long {
  text-align: left;
  padding-left: 10%;
  font-size: 0.65em;
  line-height: 1.2em;
  margin-top: 20px;
}

.biblio-long .doi {
  font-size: 0.8em;
}

.biblio-long:first-of-type { margin-top: 0; }

.reveal i, header i, footer i, .biblio-long i {
  /* For some reason ... */
  font-style: italic;
}

h1.relief {
  color: white;
  text-shadow:
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    2px 2px 0 #000;
}

.speaker-controls-notes > .katex-html {
  visibility: hidden;
}

.highlight {
  display: block;
  background-color: var(--rv-highlight-bg);
  border: var(--rv-highlight-border);
  padding: 0;
  margin-left: 5%;
  margin-right: 5%;
}

/* --- SVG animation --- */

.revealer-svg {
  width: 100%;
  margin: var(--r-block-margin) 0;
}

.revealer-svg svg {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100vh;
}

.revealer-svg svg * {
  transition: all 0.5s ease;
}

/* Animation step markers carry no visual content. */
.revealer-svg-anim {
  display: none !important;
}

.svg-error {
  color: #c00;
  font-style: italic;
}

/* --- Dark style --- */

.dark {
  background: var(--rv-dark-bg);
  color: var(--rv-dark-color);
}

.dark_fixed {
  background: var(--rv-dark-fixed-bg);
  color: var(--rv-dark-color);
}

/* --- Layout & component macros ------------------------------------------
   Backing styles for the .pres layout DSL: media shortcuts (`!` / `!!`),
   `> fill`, `> row` / `> col`, `> grid` / `> card`, `> stack` / `> layer`,
   `> pin`, callout boxes (`> info` / `> warn` / `> good`) and framed
   equations (`> eq`). Neutral by default; themes override the variables. */

:root {
  --rv-accent: #2a76dd;            /* callout / framed-eq accent */
  --rv-accent-bg: #eef3fb;         /* pale accent background */
  --rv-warn: #c75038;
  --rv-warn-bg: #fff5f1;
  --rv-good: #1a8a1a;
  --rv-good-bg: #f3fbf3;
  --rv-muted-color: #666;
  --rv-media-radius: 6px;
  --rv-card-bg: #f7f8fa;
  --rv-card-border: #e0e2e8;
  --rv-gap-row: 0.8em;
  --rv-gap-col: 1.2em;
  /* build.py emits these unprefixed names inline on rows/regions; themes
     (sfi) may override them. */
  --gap-row: var(--rv-gap-row);
  --gap-col: var(--rv-gap-col);
  --rv-box-text: #1a1a2e;
}

/* Layout primitives (used by `> row` / `> col`, also handy from raw HTML) */
.row, .col { display: flex; gap: var(--rv-gap-col); min-width: 0; min-height: 0; }
.row { flex-direction: row;    align-items: stretch; }
.col { flex-direction: column; gap: var(--rv-gap-row); }
.row > *, .col > * { min-width: 0; min-height: 0; }
.region { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* `> fill` slides fit their whole body as one block: the runtime sets
   --rv-fontscale on .rv-content-inner (columns are fitted individually on
   normal slides, but a fill body has no columns). */
.reveal section.rv-fill .rv-content-inner {
  font-size: calc(1em * var(--rv-fontscale, 1));
}

/* `> fill`: the slide body becomes a full-height flex column, so rows and
   regions can resolve their heights against the canvas. */
.reveal section.rv-fill .rv-content-inner {
  height: 100%; display: flex; flex-direction: column;
  gap: var(--rv-gap-row); min-height: 0;
}
.reveal section.rv-fill-between .rv-content-inner { justify-content: space-between; }
.reveal section.rv-fill-around  .rv-content-inner { justify-content: space-around; }
.reveal section.rv-fill-center  .rv-content-inner { justify-content: center; }
.reveal section.rv-fill-end     .rv-content-inner { justify-content: flex-end; }

/* `!` image / `!!` video shortcuts */
.rv-fig { display: flex; flex-direction: column; align-items: center; gap: 0.25em;
  min-width: 0; min-height: 0; margin: 0; max-width: 100%; }
.reveal .rv-media { display: block; max-width: 100%; height: auto; margin: 0 auto;
  border-radius: var(--rv-media-radius); }
.reveal .rv-media-fill { width: 100%; flex: 1 1 0; min-height: 0; height: 0;
  object-position: center; border-radius: var(--rv-media-radius);
  display: block; margin: 0; max-width: 100%; max-height: 100%; }
.rv-cap { font-size: 0.65em; color: var(--rv-muted-color); font-style: italic;
  text-align: center; margin-top: 0.15em; }

/* `> grid` / `> card` */
.rv-grid-wrap { width: 100%; height: 100%; flex: 1 1 auto; box-sizing: border-box; min-height: 0; }
.rv-grid { display: grid; width: 100%; height: 100%; box-sizing: border-box; }
.rv-grid-wrap.compact { flex: 0 0 auto; height: auto; }
.rv-grid-wrap.compact > .rv-grid { height: auto; }
.rv-card { background: var(--rv-card-bg); border: 1.5px solid var(--rv-card-border);
  border-radius: var(--rv-media-radius); display: flex; flex-direction: column;
  align-items: center; gap: 0.35em; padding: 0.5em 0.4em;
  min-height: 0; min-width: 0; overflow: hidden; }
.rv-cell { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.3em; min-width: 0; min-height: 0; overflow: hidden; }

/* `> stack` / `> layer`: overlaid media layers cross-fading as fragments */
.rv-stack { position: relative; display: grid; width: 100%; flex: 1 1 0;
  min-width: 0; min-height: 0; }
.rv-stack > .rv-layer { grid-area: 1 / 1; min-width: 0; min-height: 0; display: flex;
  align-items: center; justify-content: center; overflow: hidden;
  border-radius: var(--rv-media-radius); }
.rv-stack > .rv-layer.rv-opaque { background: var(--r-background-color, #fff); }
.reveal .rv-stack > .rv-layer > img,
.reveal .rv-stack > .rv-layer > svg { width: 100%; height: 100%; object-fit: contain;
  display: block; margin: 0; }
.rv-stack > .rv-layer > .rv-fig,
.rv-stack > .rv-layer > .rv-media-fill { flex: 1 1 auto; width: 100%; min-height: 0; }

/* `> pin`: absolute overlay positioned in % of the slide body */
.rv-pin { position: absolute; transform: translate(-50%, -50%); z-index: 5; }

/* Callout boxes (`> info` / `> warn` / `> good`) and framed equations (`> eq`) */
.box-info { background: var(--rv-accent-bg); border-left: 5px solid var(--rv-accent);
  border-radius: 0 8px 8px 0; padding: 0.4em 0.65em; }
.box-warn { background: var(--rv-warn-bg); border-left: 5px solid var(--rv-warn);
  border-radius: 0 8px 8px 0; padding: 0.4em 0.65em; }
.box-good { background: var(--rv-good-bg); border-left: 5px solid var(--rv-good);
  border-radius: 0 8px 8px 0; padding: 0.4em 0.65em; }
/* Cards / callouts / equation boxes keep their pale backgrounds even on
   `> style: dark` slides — pin their text color so it stays readable there
   (the slide's near-white inherited color was invisible on them). */
.rv-card, .box-info, .box-warn, .box-good, .math-box,
.rv-stack > .rv-layer.rv-opaque {
  color: var(--rv-box-text);
}

.box-title { font-size: 0.7em; font-weight: 700; line-height: 1.2; margin-bottom: 0.2em;
  color: var(--rv-accent); }
.box-warn .box-title { color: var(--rv-warn); }
.box-good .box-title { color: var(--rv-good); }
.math-box { background: var(--rv-accent-bg); border-left: 5px solid var(--rv-accent);
  border-radius: 0 6px 6px 0; padding: 0.45em 0.7em; }
.math-body { line-height: 1.4; }

/* Title slide: affiliation line (between authors and event) */
#affiliation { color: var(--rv-muted-color); font-size: 0.7em; line-height: 1.4;
  margin-top: 0.5em; }

/* --- Inline typography: color roles + size scale + card titles --------------
   Written by the inline markdown layer ([text]{.accent}, [x]{.sm}) and the
   browser editor's palette. Themes recolor/resize via the variables. */

:root {
  --rv-size-title: 1.6em;
  --rv-size-lede: 1.25em;
  --rv-size-sm: 0.8em;
  --rv-size-fine: 0.65em;
}
.accent { color: var(--rv-accent); }
.warn   { color: var(--rv-warn); }
.good   { color: var(--rv-good); }
.muted  { color: var(--rv-muted-color); }
.title { font-size: var(--rv-size-title); }
.lede  { font-size: var(--rv-size-lede); }
.sm    { font-size: var(--rv-size-sm); }
.fine  { font-size: var(--rv-size-fine); }

.card-title {
  font-weight: 700;
  font-size: 0.75em;
  color: var(--rv-accent);
  text-align: center;
  line-height: 1.2;
}