/* Self-hosted fonts (latin subsets, variable weight) so no visitor request goes
   to a third-party font CDN; `font = false` in zensical.toml drops the theme's
   Google Fonts link. Licences: assets/fonts/LICENSES.txt. */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../assets/fonts/source-sans-3-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("../assets/fonts/source-sans-3-latin-wght-italic.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../assets/fonts/source-code-pro-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Source Code Pro";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("../assets/fonts/source-code-pro-latin-wght-italic.woff2") format("woff2-variations");
}
:root {
  --md-text-font: "Source Sans 3";
  --md-code-font: "Source Code Pro";
}
/* Source Sans 3 has a smaller x-height than the theme's default face, so the
   same nominal size reads smaller; a step up keeps the body at the size the
   pages were laid out for. */
.md-typeset { font-size: 0.85rem; }
/* Code keeps its previous absolute size (13.6px): it scales off the body, and
   the body step above would otherwise carry it up too. */
.md-typeset code { font-size: 0.8em; }
/* The theme sets admonitions to an absolute size below its own body size, so
   they miss the step above and read too small; match the body instead. */
.md-typeset .admonition { font-size: 0.85rem; }

/* Aubergine brand colour: links, active nav, tab underline, hero. */
:root > * {
  --md-primary-fg-color: #5b2c6f;
  --md-primary-fg-color--light: #ead9f2;
  --md-primary-fg-color--dark: #3f1d4e;
  --md-accent-fg-color: #7a3d94;
  --md-accent-fg-color--transparent: rgba(91, 44, 111, 0.1);
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #c9a6dc;
  --md-primary-fg-color--light: #e4d3ec;
  --md-primary-fg-color--dark: #a985c0;
  --md-accent-fg-color: #d9bce8;
  --md-accent-fg-color--transparent: rgba(201, 166, 220, 0.14);
}

/* Home hero */
.pg-hero {
  clear: both; /* sit below the floated "Edit this page" button, not under it */
  margin: 0 0 2rem;
  padding: 1.5rem 1.75rem;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, #4a2159 0%, #2e1238 100%);
  color: #fff;
}
.pg-hero-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.pg-hero .pg-hero-logo-wrap {
  display: flex;
  margin: 0; /* outranks the .pg-hero p bottom margin, which would push the logo above the heading centre */
  flex: none;
}
.pg-hero-logo {
  width: 3rem;
  height: 3rem;
}
.pg-hero h1 {
  margin: 0;
  color: #fff;
  font-size: 2.2rem;
  font-weight: 700;
  white-space: nowrap;
}
@media (max-width: 30em) {
  .pg-hero h1 {
    font-size: 1.6rem;
  }
}
.pg-hero p {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 300; /* regular weight reads dense as light-on-dark */
  max-width: 44rem;
  opacity: 0.95;
}
.pg-hero .pg-hero-gwt {
  line-height: 1.45; /* tight enough that the three lines read as one block */
  margin-bottom: 1rem;
}
.pg-hero-gwt span {
  display: block;
  margin-bottom: 0.3rem; /* still a step between items, so a wrapped line stays with its own */
}
.pg-hero-gwt b {
  font-weight: 500;
}
.pg-hero .pg-hero-punch {
  font-style: italic;
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 0 0 1.4rem;
}
@media (max-width: 30em) {
  .pg-hero .pg-hero-punch {
    font-size: 1.05rem; /* after the base rule: same specificity, so order decides */
  }
}
.pg-hero .pg-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
}
.pg-hero a:not(.md-button) {
  color: #fff;
  text-decoration: underline;
}
.pg-hero code {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.pg-hero .md-button {
  margin: 0;
  padding: 0.45em 1.4em;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  background: transparent; /* outline only, so the primary is the single filled button */
  border: 0.1rem solid rgba(255, 255, 255, 0.6);
}
.pg-hero .md-button:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
}
.pg-hero .md-button--primary {
  background: #fff;
  color: #3f1d4e;
  border-color: #fff;
}

/* Home diagram: an inline SVG (assets/pytest-given-diagram.svg, which carries
   its own artwork rules) whose colours are these tokens, so it follows the brand
   and the colour scheme. One hue in two weights: actors (people and agents)
   tinted, artifacts solid. The README copy resolves the same tokens to literals
   in noxfile.py's `diagram` session -- keep the two lists in step. */
:root > * {
  --pg-diagram-bg: var(--md-default-bg-color);
  --pg-diagram-line: var(--md-default-fg-color--light);
  --pg-diagram-panel: var(--md-code-bg-color);
  --pg-diagram-panel-edge: var(--md-default-fg-color--lighter);
  --pg-diagram-people-fill: var(--md-primary-fg-color--light);
  --pg-diagram-people-ink: var(--md-primary-fg-color--dark);
  --pg-diagram-artifact-fill: var(--md-primary-fg-color);
  --pg-diagram-artifact-ink: #fff;
}
[data-md-color-scheme="slate"] {
  --pg-diagram-people-fill: #352e3c; /* lilac at 22% over the slate page; opaque so the icon cut-out covers what it sits on */
  --pg-diagram-people-ink: var(--md-primary-fg-color--light);
  --pg-diagram-artifact-ink: var(--md-default-bg-color);
}
.md-typeset .pg-diagram {
  width: 100%; /* the theme's figure is fit-content, which collapses an SVG with no intrinsic width */
  max-width: 36rem;
  margin: 1.5rem auto 2rem;
}
.pg-diagram-svg {
  display: block;
  width: 100%;
  height: auto;
}
.md-typeset .pg-diagram figcaption {
  max-width: none;
  margin: 0.4rem 0 0;
  font-size: 0.7rem;
  font-style: normal;
  text-align: right;
}