/* ==========================================================================
   Fstic theme
   Amber and coral from the wordmark, teal from the helix between the letters.
   Same three colours as the mark, so the tab icon and the page read as one
   project.
   ========================================================================== */

[data-md-color-primary="custom"] {
  --md-primary-fg-color:        #d9862b;
  --md-primary-fg-color--light: #fec56e;
  --md-primary-fg-color--dark:  #875d3e;
}

[data-md-color-accent="custom"] {
  --md-accent-fg-color: #00a49d;
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: hsl(28, 9%, 10%);
  --md-code-bg-color:    hsl(28, 8%, 15%);
}
[data-md-color-scheme="slate"][data-md-color-primary="custom"] {
  --md-primary-fg-color: #fec56e;
}
[data-md-color-scheme="slate"][data-md-color-accent="custom"] {
  --md-accent-fg-color: #00d0c7;
}

/* The mark carries its own outline, so it needs no plate of its own; it only
   needs room to breathe next to the site name. */
.md-header__button.md-logo img {
  width: auto;
  height: 1.7rem;
}

/* ==========================================================================
   Typography
   Material's defaults are a touch loose for a reference site: tighten the
   headings and give sections more air above than below, so a long page reads
   as blocks rather than an even stream.
   ========================================================================== */

.md-typeset h1 {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--md-default-fg-color);
}

.md-typeset h2 {
  font-weight: 650;
  letter-spacing: -0.01em;
  margin-top: 2.4em;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.md-typeset h3 {
  font-weight: 600;
  margin-top: 1.8em;
}

/* ==========================================================================
   Tables
   Much of this site is flag tables and formula tables, and Material lets them
   stretch to the text column and wrap every cell. Let them scroll instead, and
   keep the header in place while you read down a long one.
   ========================================================================== */

.md-typeset table:not([class]) {
  font-size: 0.72rem;
  display: table;
}

.md-typeset table:not([class]) th {
  position: sticky;
  top: 0;
  background: var(--md-default-bg-color);
  font-weight: 600;
  white-space: nowrap;
}

.md-typeset table:not([class]) td code {
  white-space: nowrap;
}

/* Distance matrices read as grids, not prose: keep the cells narrow and
   aligned so a column of numbers lines up. */
.md-typeset table.matrix td,
.md-typeset table.matrix th {
  font-family: var(--md-code-font-family);
  font-size: 0.68rem;
  text-align: right;
}
.md-typeset table.matrix td:first-child,
.md-typeset table.matrix th:first-child {
  text-align: left;
}

/* ==========================================================================
   Home page
   ========================================================================== */

.hero {
  text-align: center;
  margin: 0.4rem 0 2.2rem;
}

.hero .hero-logo {
  width: 260px;
  max-width: 80%;
  margin: 0 auto;
}

/* The wordmark already spells the name, so the h1 is there for document
   structure and screen readers only. Without one Material falls back to
   rendering the nav title, which puts a stray "Home" above the logo. */
.md-typeset .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.md-typeset .hero p {
  max-width: 34rem;
  margin: 1rem auto 0;
  font-size: 0.85rem;
  color: var(--md-default-fg-color--light);
}

/* Material's own card grid, kept a little tighter than the default. */
.md-typeset .grid.cards > ul > li {
  border-radius: 0.4rem;
  padding: 0.8rem 1rem;
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--md-accent-fg-color);
}

.md-typeset .grid.cards > ul > li > hr {
  margin: 0.6rem 0;
}

.md-typeset .grid.cards .twemoji,
.md-typeset .grid.cards svg {
  color: var(--md-primary-fg-color);
  vertical-align: -0.15em;
}