/* Periplus: reading pages, links, header, footer. Colours come from variables.css. */

.md-typeset h1,
.md-typeset h2 {
  letter-spacing: -0.015em;
  color: var(--pp-ink);
}

.md-typeset a {
  text-underline-offset: 0.18em;
}

.md-typeset a:hover {
  color: var(--pp-accent);
}

.md-header {
  box-shadow: 0 1px 0 var(--pp-line);
}

.md-typeset code {
  border-radius: 6px;
}

.md-typeset .admonition,
.md-typeset details {
  border-radius: 12px;
  border-color: var(--pp-accent);
  background: var(--pp-surface);
}

.md-typeset .admonition-title,
.md-typeset summary {
  background: color-mix(in oklab, var(--pp-accent) 12%, var(--pp-surface));
}

/* Brand mark in the landing footer: light on dark, dark on light. The content
   pages' footer mark comes from shared.css. */
.landing-footer .brand-mark {
  height: 1em;
  width: auto;
  vertical-align: -0.18em;
  margin: 0 0.2rem;
  opacity: 0.8;
}

[data-md-color-scheme="slate"] .landing-footer .brand-mark {
  filter: invert(1);
}

/* Scroll reveal (reveal.js sets js-ready, then visible per section). */
@media (prefers-reduced-motion: no-preference) {
  html.js-ready .landing-section {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  html.js-ready .landing-section.visible {
    opacity: 1;
    transform: none;
  }
}