.float-right-figure {
  width: 40%;
  float: right;
}

/* Footnotes (littlefoot). The button template is overridden in
   site-scripts.html to show the footnote number instead of the default
   3-dot ellipsis; here we style it as a small superscript badge and tune
   the popover. littlefoot exposes popover styling as CSS custom properties
   on .littlefoot; the doubled class raises specificity above littlefoot's
   own rules so these win regardless of stylesheet order, and all popover
   descendants inherit them. */
.littlefoot.littlefoot {
  --button-background-color: #5e6b7e;
  --button-active-background-color: #3f4b5b;
  --button-text-color: #fff;
  --button-active-text-color: #fff;
  --popover-font-family: "avenir next", avenir, -apple-system,
    BlinkMacSystemFont, "Helvetica Neue", helvetica, sans-serif;
  --popover-font-size: 0.95rem;
  --popover-line-height: 1.5;
  --popover-vertical-padding: 0.25rem;
  --popover-horizontal-padding: 0.85rem;
  --popover-width: 20em;
  --popover-background-color: #f9f9f9;
  --popover-text-color: #222;
}

/* Number badge: size to the digits rather than the old fixed pill shape,
   raised slightly like a superscript reference. */
.littlefoot .littlefoot__button {
  height: auto;
  min-width: 1.2em;
  padding: 0.15em 0.38em;
  margin: 0 0.15em;
  font-family: "avenir next", avenir, -apple-system, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  border-radius: 0.28em;
  vertical-align: super;
}

.nested-img img {
  width: auto;
  max-width: 100%;
  margin: auto;
}

figure h4,
figcaption p,
h5 {
  text-align: center;
  margin-top: 0.5rem;
  font-weight: normal;
  font-family: sans-serif;
  font-size: 1rem;
}

.nested-links a {
  color: #000;
}

.nested-links a:hover {
  color: #666;
}

.bg-near-white {
  background-color: #f9f9f9;
}

.mid-gray {
  color: #444;
}

/* enlarge main text column in articles — large screens only.
   Tachyons scopes .w-two-thirds-l to >=60em; keep our override in the same
   breakpoint so phones get the full-width (block) default instead of 80%. */
@media screen and (min-width: 60em) {
  .w-two-thirds-l {
    width: 80%;
  }
}

/* smaller H1 titles in articles */
h1 {
  font-size: 1.66em;
}

/* center tables */
table {
  margin: 0 auto;
}

/* add some padding to table elements */
th,
td {
  padding: 0 0.5rem;
  text-align: center;
}

/* TOC sidebar: only style it as a narrow sticky column on large screens.
   Below 60em the aside stacks under the article and should be full width. */
@media screen and (min-width: 60em) {
  aside.w-30-l {
    width: 20%;
    position: sticky;
    top: 2rem;
    height: fit-content;
  }
}

/* TOC styling to distinguish heading levels */
.nested-list-reset nav ul {
  list-style: none;
  padding-left: 0;
}

.nested-list-reset nav ul ul {
  padding-left: 1rem;
}

.nested-list-reset nav ul ul ul {
  padding-left: 2rem;
}

.nested-list-reset nav ul li a {
  display: block;
  padding: 0.1rem 0;
  color: #333;
  text-decoration: none;
  font-weight: 500;
}

.nested-list-reset nav ul ul li a {
  font-weight: 400;
  color: #666;
  font-size: 0.9rem;
}

.nested-list-reset nav ul ul ul li a {
  font-weight: 300;
  color: #999;
  font-size: 0.8rem;
}