/* Landing page hero — centred pitch with the mark above the headline. */
.md-typeset .hero {
  text-align: center;
  padding: 1.5rem 0 0.5rem;
}
.md-typeset .hero .hero-logo {
  height: 5rem;
  width: auto;
}
.md-typeset .hero h1 {
  font-size: 2.1em;
  margin: 0.4em auto 0.5em;
  max-width: 24em;
}
.md-typeset .hero p {
  max-width: 42em;
  margin-left: auto;
  margin-right: auto;
}
.md-typeset .hero .md-button {
  margin: 0.25rem 0.25rem;
}

/* The crucible mark inline in the tutorial's H1 title — scale it to the title
   and centre it vertically (baseline alignment sits it too low). */
.md-typeset h1 img.logo {
  height: 0.92em;
  width: auto;
  vertical-align: -0.12em;
  margin-right: 0.3rem;
}

/* The gauntlet gate names (REAL, STRONG, DURABLE, …) as one consistent token:
   spaced small caps in a teal deeper than the link color, so the controlled
   vocabulary reads as terms of art without looking clickable. Wrapped
   automatically by docs/gate_tokens.py (the on_page_content hook). */
.md-typeset .gate {
  font-size: 0.86em;
  letter-spacing: 0.13em;
  font-weight: 500;
  color: #00695c;
}
[data-md-color-scheme="slate"] .md-typeset .gate {
  color: #5dcaa5;
}

/* Legend swatches for the Architecture module map (colour = role). */
.md-typeset .sw {
  display: inline-block;
  width: 0.72em;
  height: 0.72em;
  border-radius: 2px;
  vertical-align: -1px;
  margin-right: 0.15em;
}
.md-typeset .sw-producer { background: #1D9E75; }
.md-typeset .sw-judge    { background: #7F77DD; }
.md-typeset .sw-input    { background: #D3D1C7; }
.md-typeset .sw-output   { background: #D85A30; }