/* ============================================================
   yasp docs theme (Material for MkDocs overrides)

   Tokens and rules come from the yasp design system
   (yasp-design/colors_and_type.css, README §4 VISUAL FOUNDATIONS):
   warm Paper + deep Teal grounds, Magenta accent only where it
   earns it, Playfair Display for the h1, Aeonik for everything
   else, hairline borders, small radii, soft low shadows.

   Code stays in a real monospace. PP Mondwest is a display face
   and the design system's own A4 document kit keeps it out of
   running code for legibility; here it is reserved for labels.
   ============================================================ */

/* ---------- fonts (self-hosted, no third-party requests) ---------- */
@font-face {
  font-family: "Aeonik";
  src: url("../fonts/aeonik-light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("../fonts/aeonik-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("../fonts/aeonik-medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/PlayfairDisplay.ttf") format("truetype");
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/PlayfairDisplay-Italic.ttf") format("truetype");
  font-weight: 400 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "PP Mondwest";
  src: url("../fonts/PPMondwest-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- brand palette ---------- */
:root {
  --yasp-paper: #FAF8F4;
  --yasp-ink: #191919;
  --yasp-canvas: #212121;
  --yasp-teal: #1C4A45;
  --yasp-teal-900: #0E2A27;
  --yasp-teal-800: #143734;
  --yasp-teal-600: #265F58;
  --yasp-teal-500: #347a71;
  --yasp-sage: #C6DDD3;
  --yasp-pink: #F2CCE0;
  --yasp-wine: #6A0D2C;
  --yasp-magenta: #9E004F;
  --yasp-magenta-500: #c01561;
  --yasp-magenta-pressed: #820041;
  --yasp-magenta-light: #e0559a;   /* magenta for text on dark grounds */

  --yasp-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --yasp-font-sans: "Aeonik", "Helvetica Neue", Arial, system-ui, sans-serif;
  --yasp-font-mono-display: "PP Mondwest", ui-monospace, "SF Mono", Menlo, monospace;

  --yasp-radius-sm: 4px;
  --yasp-radius-md: 6px;
  --yasp-radius-lg: 10px;
  --yasp-tracking-wide: 0.16em;
  --yasp-ease-out: cubic-bezier(.16, .84, .34, 1);
  --yasp-dur: 200ms;

  /* Material builds its font stacks from these two. */
  --md-text-font: "Aeonik";
  --md-code-font: ui-monospace, "SF Mono";
}

/* ---------- light scheme: paper ground ---------- */
[data-md-color-scheme="default"] {
  --yasp-bg-subtle: #F1EEE6;
  --yasp-surface: #FFFFFF;
  --yasp-fg2: #4A4A47;
  --yasp-fg3: #86847E;
  --yasp-border: #E2DED4;
  --yasp-border-strong: #C9C4B7;
  --yasp-accent: var(--yasp-magenta);
  --yasp-accent-hover: var(--yasp-magenta-pressed);

  --md-primary-fg-color: var(--yasp-teal);
  --md-primary-fg-color--light: var(--yasp-teal-600);
  --md-primary-fg-color--dark: var(--yasp-teal-800);
  --md-primary-bg-color: var(--yasp-paper);
  --md-primary-bg-color--light: rgba(250, 248, 244, .72);

  --md-accent-fg-color: var(--yasp-magenta);
  --md-accent-fg-color--transparent: rgba(158, 0, 79, .10);
  --md-accent-bg-color: var(--yasp-paper);
  --md-accent-bg-color--light: rgba(250, 248, 244, .72);

  --md-default-fg-color: var(--yasp-ink);
  --md-default-fg-color--light: var(--yasp-fg2);
  --md-default-fg-color--lighter: var(--yasp-fg3);
  --md-default-fg-color--lightest: var(--yasp-border);
  --md-default-bg-color: var(--yasp-paper);
  --md-default-bg-color--light: rgba(250, 248, 244, .72);
  --md-default-bg-color--lighter: rgba(250, 248, 244, .30);
  --md-default-bg-color--lightest: rgba(250, 248, 244, .12);

  --md-typeset-color: var(--yasp-ink);
  --md-typeset-a-color: var(--yasp-magenta);
  --md-typeset-mark-color: rgba(242, 204, 224, .7);
  --md-typeset-table-color: var(--yasp-border);
  --md-typeset-table-color--light: rgba(226, 222, 212, .35);
  --md-typeset-kbd-color: var(--yasp-surface);
  --md-typeset-kbd-accent-color: var(--yasp-surface);
  --md-typeset-kbd-border-color: var(--yasp-border-strong);

  --md-footer-fg-color: var(--yasp-paper);
  --md-footer-fg-color--light: #B8B6B0;
  --md-footer-fg-color--lighter: #807E78;
  --md-footer-bg-color: var(--yasp-canvas);
  --md-footer-bg-color--dark: #1A1A1A;

  --md-shadow-z1: 0 1px 2px rgba(25, 25, 25, .06);
  --md-shadow-z2: 0 4px 16px rgba(25, 25, 25, .08);
  --md-shadow-z3: 0 18px 48px rgba(25, 25, 25, .14);

  --md-warning-fg-color: var(--yasp-paper);
  --md-warning-bg-color: var(--yasp-wine);

  /* Diagrams: teal boxes on paper, ink labels. */
  --md-mermaid-font-family: var(--yasp-font-sans);
  --md-mermaid-edge-color: var(--yasp-fg2);
  --md-mermaid-node-bg-color: var(--yasp-sage);
  --md-mermaid-node-fg-color: var(--yasp-teal);
  --md-mermaid-label-bg-color: var(--yasp-paper);
  --md-mermaid-label-fg-color: var(--yasp-ink);
}

/* ---------- dark scheme: canvas ground ---------- */
@media screen {
  [data-md-color-scheme="slate"] {
    --yasp-bg-subtle: #1A1A1A;
    --yasp-surface: #2B2B2B;
    --yasp-fg2: #B8B6B0;
    --yasp-fg3: #807E78;
    --yasp-border: rgba(250, 248, 244, .12);
    --yasp-border-strong: rgba(250, 248, 244, .24);
    --yasp-accent: var(--yasp-magenta-light);
    --yasp-accent-hover: #ea79b0;

    --md-hue: 40deg;
    --md-primary-fg-color: var(--yasp-teal);
    --md-primary-fg-color--light: var(--yasp-teal-600);
    --md-primary-fg-color--dark: var(--yasp-teal-900);
    --md-primary-bg-color: var(--yasp-paper);
    --md-primary-bg-color--light: rgba(250, 248, 244, .72);

    --md-accent-fg-color: var(--yasp-magenta-light);
    --md-accent-fg-color--transparent: rgba(224, 85, 154, .14);
    --md-accent-bg-color: var(--yasp-ink);
    --md-accent-bg-color--light: rgba(25, 25, 25, .72);

    --md-default-fg-color: var(--yasp-paper);
    --md-default-fg-color--light: var(--yasp-fg2);
    --md-default-fg-color--lighter: var(--yasp-fg3);
    --md-default-fg-color--lightest: var(--yasp-border);
    --md-default-bg-color: var(--yasp-canvas);
    --md-default-bg-color--light: rgba(33, 33, 33, .72);
    --md-default-bg-color--lighter: rgba(33, 33, 33, .30);
    --md-default-bg-color--lightest: rgba(33, 33, 33, .12);

    --md-typeset-color: var(--yasp-paper);
    --md-typeset-a-color: var(--yasp-magenta-light);
    --md-typeset-mark-color: rgba(158, 0, 79, .45);
    --md-typeset-table-color: var(--yasp-border);
    --md-typeset-table-color--light: rgba(250, 248, 244, .04);
    --md-typeset-kbd-color: var(--yasp-surface);
    --md-typeset-kbd-accent-color: #333;
    --md-typeset-kbd-border-color: var(--yasp-ink);

    --md-admonition-fg-color: var(--yasp-paper);
    --md-admonition-bg-color: var(--yasp-canvas);

    --md-footer-fg-color: var(--yasp-paper);
    --md-footer-fg-color--light: #B8B6B0;
    --md-footer-fg-color--lighter: #807E78;
    --md-footer-bg-color: #1A1A1A;
    --md-footer-bg-color--dark: #141414;

    --md-shadow-z1: 0 1px 2px rgba(0, 0, 0, .3);
    --md-shadow-z2: 0 4px 16px rgba(0, 0, 0, .4);
    --md-shadow-z3: 0 18px 48px rgba(0, 0, 0, .5);

    --md-warning-fg-color: var(--yasp-paper);
    --md-warning-bg-color: var(--yasp-wine);

    --md-mermaid-font-family: var(--yasp-font-sans);
    --md-mermaid-edge-color: var(--yasp-fg2);
    --md-mermaid-node-bg-color: #16403B;
    --md-mermaid-node-fg-color: var(--yasp-sage);
    --md-mermaid-label-bg-color: var(--yasp-canvas);
    --md-mermaid-label-fg-color: var(--yasp-paper);

    color-scheme: dark;
  }
}

/* ---------- code: an ink terminal panel on every ground ---------- */
[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
  --md-code-fg-color: #e8e6e0;
  --md-code-bg-color: var(--yasp-ink);
  --md-code-bg-color--light: #222222;
  --md-code-bg-color--lighter: #2b2b2b;
  --md-code-hl-color: var(--yasp-teal-500);
  --md-code-hl-color--light: rgba(52, 122, 113, .28);
  --md-code-hl-number-color: var(--yasp-pink);
  --md-code-hl-special-color: var(--yasp-magenta-light);
  --md-code-hl-function-color: #7fd1a8;
  --md-code-hl-constant-color: var(--yasp-pink);
  --md-code-hl-keyword-color: var(--yasp-sage);
  --md-code-hl-string-color: var(--yasp-magenta-light);
  --md-code-hl-name-color: var(--md-code-fg-color);
  --md-code-hl-operator-color: #a9a69f;
  --md-code-hl-punctuation-color: #a9a69f;
  --md-code-hl-comment-color: #6f8b86;
  --md-code-hl-generic-color: #6f8b86;
  --md-code-hl-variable-color: #a9a69f;
}

body {
  -webkit-font-smoothing: antialiased;
}

/* ---------- header: teal ground, paper lockup ---------- */
.md-header {
  box-shadow: none;
  border-bottom: 1px solid rgba(250, 248, 244, .10);
}
.md-header--shadow {
  box-shadow: none;
}
.md-header__button.md-logo {
  padding: .4rem .3rem .4rem .6rem;
}
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.3rem;
  width: auto;
}
/* The lockup already says "yasp"; keep only the page title that
   slides in on scroll. */
.md-header__topic:first-child {
  visibility: hidden;
}
.md-header__topic + .md-header__topic {
  font-weight: 400;
  color: var(--md-primary-bg-color--light);
}
.md-header__button:hover {
  opacity: 1;
}

/* search field on teal */
.md-search__form {
  border-radius: var(--yasp-radius-sm);
  background-color: rgba(250, 248, 244, .12);
}
.md-search__form:hover {
  background-color: rgba(250, 248, 244, .18);
}
[data-md-toggle=search]:checked ~ .md-header .md-search__form {
  border-radius: var(--yasp-radius-sm) var(--yasp-radius-sm) 0 0;
}
.md-search__output {
  border-radius: 0 0 var(--yasp-radius-sm) var(--yasp-radius-sm);
}

/* ---------- sidebar navigation ---------- */
.md-nav {
  font-size: .7rem;
}
.md-nav--secondary .md-nav__title {
  font-family: var(--yasp-font-mono-display);
  font-weight: 400;
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--yasp-fg3);
}
.md-nav__link {
  transition: color var(--yasp-dur) var(--yasp-ease-out);
}
.md-nav__item--active > .md-nav__link,
.md-nav__link--active {
  font-weight: 500;
}
.md-sidebar__scrollwrap {
  scrollbar-color: var(--yasp-border-strong) transparent;
}
@media screen and (min-width: 76.25em) {
  /* the header lockup already names the site */
  .md-nav--primary > .md-nav__title {
    display: none;
  }
}
@media screen and (max-width: 76.1875em) {
  /* mobile drawer header */
  .md-nav--primary .md-nav__title[for=__drawer] {
    background-color: var(--md-primary-fg-color);
    color: var(--md-primary-bg-color);
    font-weight: 500;
  }
  .md-nav--primary .md-nav__title .md-nav__button img {
    height: 1.6rem;
    width: auto;
  }
}

/* ---------- typography ---------- */
.md-typeset {
  font-size: .8rem;
  line-height: 1.6;
}
.md-typeset h1 {
  font-family: var(--yasp-font-display);
  font-weight: 600;
  font-size: 2.2em;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--md-default-fg-color);
  margin: 0 0 1.1em;
}
.md-typeset h1 em {
  font-style: italic;
  font-weight: 500;
}
.md-typeset h2 {
  font-family: var(--yasp-font-sans);
  font-weight: 500;
  font-size: 1.5em;
  line-height: 1.2;
  letter-spacing: -.011em;
  margin: 2em 0 .7em;
}
.md-typeset h3 {
  font-weight: 500;
  font-size: 1.2em;
  line-height: 1.25;
  letter-spacing: -.011em;
}
.md-typeset h4 {
  font-weight: 500;
  font-size: 1.05em;
}
.md-typeset h5,
.md-typeset h6 {
  font-weight: 500;
  font-size: .75em;
  letter-spacing: var(--yasp-tracking-wide);
  text-transform: uppercase;
  color: var(--yasp-fg3);
}
.md-typeset h2 code,
.md-typeset h3 code,
.md-typeset h4 code {
  font-weight: 400;
}
.md-typeset a {
  text-underline-offset: .15em;
  transition: color var(--yasp-dur) var(--yasp-ease-out);
}
.md-typeset a:hover {
  color: var(--yasp-accent-hover);
  text-decoration: underline;
}
.md-typeset hr {
  border-bottom: 1px solid var(--yasp-border);
}
.md-typeset blockquote {
  border-left: 2px solid var(--yasp-teal);
  color: var(--yasp-fg2);
}

/* ---------- code ---------- */
.md-typeset code,
.md-typeset kbd,
.md-typeset pre {
  font-size: .85em;
}
/* inline code: a quiet chip on the page ground */
.md-typeset :not(pre) > code {
  background-color: var(--yasp-bg-subtle);
  color: var(--md-typeset-color);
  border: 1px solid var(--yasp-border);
  border-radius: var(--yasp-radius-sm);
  padding: 0 .3em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.md-typeset a > code {
  color: currentColor;
}
.md-typeset .admonition :not(pre) > code,
.md-typeset details :not(pre) > code {
  background-color: var(--yasp-bg-subtle);
}
/* block code: the ink terminal panel */
.md-typeset pre > code {
  border-radius: var(--yasp-radius-md);
  padding: .9em 1.1em;
  line-height: 1.65;
}
@media screen {
  [data-md-color-scheme="slate"] .md-typeset pre > code {
    box-shadow: inset 0 0 0 1px rgba(250, 248, 244, .08);
  }
}
.md-typeset .highlight span.filename {
  background-color: var(--md-code-bg-color--light);
  color: #8FA9A3;
  border-bottom: 1px solid #2e2e2e;
  border-radius: var(--yasp-radius-md) var(--yasp-radius-md) 0 0;
  font-family: var(--yasp-font-mono-display);
  font-size: .75em;
  letter-spacing: .02em;
}
.md-typeset .highlight span.filename + pre > code {
  border-radius: 0 0 var(--yasp-radius-md) var(--yasp-radius-md);
}
.md-typeset .highlight [data-linenos]:before {
  background-color: var(--md-code-bg-color--light);
  color: #6f8b86;
}
.md-clipboard {
  color: rgba(250, 248, 244, .35);
}
.md-clipboard:hover {
  color: var(--yasp-magenta-light);
}
.md-typeset kbd {
  border-radius: var(--yasp-radius-sm);
  box-shadow: 0 1px 0 var(--md-typeset-kbd-border-color);
}
/* code inside tabs sits flush with the tab bar */
.md-typeset .tabbed-set > .tabbed-content > .highlight:first-child > pre > code {
  border-top-left-radius: 0;
}

/* ---------- admonitions: hairline cards, no shadow ---------- */
/* [class] bumps specificity above Material's per-type rules
   (.md-typeset .admonition.note) so the palette below wins. */
.md-typeset .admonition[class],
.md-typeset details[class] {
  font-size: .7rem;
  border-width: 1px;
  border-radius: var(--yasp-radius-md);
  box-shadow: none;
  --yasp-adm: var(--yasp-teal);
  border-color: var(--yasp-adm);
}
.md-typeset .admonition[class] > .admonition-title,
.md-typeset details[class] > summary {
  font-weight: 500;
  background-color: color-mix(in srgb, var(--yasp-adm) 10%, transparent);
  border-color: var(--yasp-adm);
}
.md-typeset .admonition[class] > .admonition-title::before,
.md-typeset details[class] > summary::before {
  background-color: var(--yasp-adm);
}
.md-typeset details[class] > summary::after {
  color: var(--yasp-adm);
}
.md-typeset .admonition:focus-within,
.md-typeset details:focus-within {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--yasp-accent) 55%, transparent);
}

/* type → palette colour */
.md-typeset .admonition.note, .md-typeset details.note,
.md-typeset .admonition.abstract, .md-typeset details.abstract,
.md-typeset .admonition.summary, .md-typeset details.summary,
.md-typeset .admonition.tldr, .md-typeset details.tldr,
.md-typeset .admonition.info, .md-typeset details.info,
.md-typeset .admonition.todo, .md-typeset details.todo {
  --yasp-adm: var(--yasp-teal);
}
.md-typeset .admonition.tip, .md-typeset details.tip,
.md-typeset .admonition.hint, .md-typeset details.hint,
.md-typeset .admonition.important, .md-typeset details.important,
.md-typeset .admonition.success, .md-typeset details.success,
.md-typeset .admonition.check, .md-typeset details.check,
.md-typeset .admonition.done, .md-typeset details.done {
  --yasp-adm: var(--yasp-teal-500);
}
.md-typeset .admonition.question, .md-typeset details.question,
.md-typeset .admonition.help, .md-typeset details.help,
.md-typeset .admonition.faq, .md-typeset details.faq,
.md-typeset .admonition.quote, .md-typeset details.quote,
.md-typeset .admonition.cite, .md-typeset details.cite {
  --yasp-adm: var(--yasp-fg3);
}
.md-typeset .admonition.example, .md-typeset details.example {
  --yasp-adm: var(--md-default-fg-color);
}
.md-typeset .admonition.warning, .md-typeset details.warning,
.md-typeset .admonition.caution, .md-typeset details.caution,
.md-typeset .admonition.attention, .md-typeset details.attention {
  --yasp-adm: var(--yasp-magenta);
}
.md-typeset .admonition.failure, .md-typeset details.failure,
.md-typeset .admonition.fail, .md-typeset details.fail,
.md-typeset .admonition.missing, .md-typeset details.missing,
.md-typeset .admonition.danger, .md-typeset details.danger,
.md-typeset .admonition.error, .md-typeset details.error,
.md-typeset .admonition.bug, .md-typeset details.bug {
  --yasp-adm: var(--yasp-wine);
}
@media screen {
  [data-md-color-scheme="slate"] .md-typeset .admonition.note,
  [data-md-color-scheme="slate"] .md-typeset details.note,
  [data-md-color-scheme="slate"] .md-typeset .admonition.abstract,
  [data-md-color-scheme="slate"] .md-typeset details.abstract,
  [data-md-color-scheme="slate"] .md-typeset .admonition.summary,
  [data-md-color-scheme="slate"] .md-typeset details.summary,
  [data-md-color-scheme="slate"] .md-typeset .admonition.tldr,
  [data-md-color-scheme="slate"] .md-typeset details.tldr,
  [data-md-color-scheme="slate"] .md-typeset .admonition.info,
  [data-md-color-scheme="slate"] .md-typeset details.info,
  [data-md-color-scheme="slate"] .md-typeset .admonition.todo,
  [data-md-color-scheme="slate"] .md-typeset details.todo {
    --yasp-adm: #8FA9A3;
  }
  [data-md-color-scheme="slate"] .md-typeset .admonition.tip,
  [data-md-color-scheme="slate"] .md-typeset details.tip,
  [data-md-color-scheme="slate"] .md-typeset .admonition.hint,
  [data-md-color-scheme="slate"] .md-typeset details.hint,
  [data-md-color-scheme="slate"] .md-typeset .admonition.important,
  [data-md-color-scheme="slate"] .md-typeset details.important,
  [data-md-color-scheme="slate"] .md-typeset .admonition.success,
  [data-md-color-scheme="slate"] .md-typeset details.success,
  [data-md-color-scheme="slate"] .md-typeset .admonition.check,
  [data-md-color-scheme="slate"] .md-typeset details.check,
  [data-md-color-scheme="slate"] .md-typeset .admonition.done,
  [data-md-color-scheme="slate"] .md-typeset details.done {
    --yasp-adm: #7fd1a8;
  }
  [data-md-color-scheme="slate"] .md-typeset .admonition.warning,
  [data-md-color-scheme="slate"] .md-typeset details.warning,
  [data-md-color-scheme="slate"] .md-typeset .admonition.caution,
  [data-md-color-scheme="slate"] .md-typeset details.caution,
  [data-md-color-scheme="slate"] .md-typeset .admonition.attention,
  [data-md-color-scheme="slate"] .md-typeset details.attention {
    --yasp-adm: var(--yasp-magenta-light);
  }
  [data-md-color-scheme="slate"] .md-typeset .admonition.failure,
  [data-md-color-scheme="slate"] .md-typeset details.failure,
  [data-md-color-scheme="slate"] .md-typeset .admonition.fail,
  [data-md-color-scheme="slate"] .md-typeset details.fail,
  [data-md-color-scheme="slate"] .md-typeset .admonition.missing,
  [data-md-color-scheme="slate"] .md-typeset details.missing,
  [data-md-color-scheme="slate"] .md-typeset .admonition.danger,
  [data-md-color-scheme="slate"] .md-typeset details.danger,
  [data-md-color-scheme="slate"] .md-typeset .admonition.error,
  [data-md-color-scheme="slate"] .md-typeset details.error,
  [data-md-color-scheme="slate"] .md-typeset .admonition.bug,
  [data-md-color-scheme="slate"] .md-typeset details.bug {
    --yasp-adm: var(--yasp-magenta-500);
  }
}

/* ---------- content tabs ---------- */
.md-typeset .tabbed-labels > label {
  font-weight: 500;
  font-size: .7rem;
}
.md-typeset .tabbed-labels {
  box-shadow: 0 -1px var(--yasp-border) inset;
}

/* ---------- tables ---------- */
.md-typeset table:not([class]) {
  font-size: .7rem;
  border: 1px solid var(--yasp-border);
  border-radius: var(--yasp-radius-md);
  box-shadow: none;
}
.md-typeset table:not([class]) th {
  font-family: var(--yasp-font-sans);
  font-weight: 500;
  font-size: .6rem;
  letter-spacing: var(--yasp-tracking-wide);
  text-transform: uppercase;
  color: var(--yasp-fg3);
  background-color: var(--yasp-bg-subtle);
  border-bottom: 1px solid var(--yasp-border);
}
.md-typeset table:not([class]) td {
  border-top: 1px solid var(--yasp-border);
  vertical-align: top;
}

/* ---------- buttons: verb-first, sentence case, trailing arrow ---------- */
.md-typeset .md-button {
  font-family: var(--yasp-font-sans);
  font-weight: 500;
  font-size: .75rem;
  border: 1px solid var(--yasp-border-strong);
  border-radius: var(--yasp-radius-sm);
  color: var(--md-typeset-color);
  padding: .55em 1.1em;
  transition: background-color var(--yasp-dur) var(--yasp-ease-out),
              border-color var(--yasp-dur) var(--yasp-ease-out),
              color var(--yasp-dur) var(--yasp-ease-out);
}
.md-typeset .md-button:hover,
.md-typeset .md-button:focus {
  background-color: transparent;
  border-color: currentColor;
  color: var(--md-typeset-color);
  text-decoration: none;
}
.md-typeset .md-button--primary {
  background-color: var(--yasp-magenta);
  border-color: var(--yasp-magenta);
  color: var(--yasp-paper);
}
.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus {
  background-color: var(--yasp-magenta-pressed);
  border-color: var(--yasp-magenta-pressed);
  color: var(--yasp-paper);
}

/* ---------- footer ---------- */
.md-footer__inner {
  font-size: .7rem;
}
.md-footer__title {
  font-weight: 400;
}
.md-footer-meta {
  border-top: 1px solid rgba(250, 248, 244, .10);
}
.md-copyright {
  font-family: var(--yasp-font-mono-display);
  font-size: .6rem;
  letter-spacing: .04em;
}

/* ---------- misc chrome ---------- */
.md-top {
  border-radius: var(--yasp-radius-sm);
  box-shadow: var(--md-shadow-z2);
}
.md-search-result__meta {
  font-family: var(--yasp-font-mono-display);
  letter-spacing: .04em;
}
::selection {
  background-color: var(--yasp-pink);
  color: var(--yasp-ink);
}

/* ============================================================
   Landing page components (index.md)
   ============================================================ */

/* hero: full-bleed teal band with the Pattern v7 bar system */
.yasp-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--yasp-teal) 0%, var(--yasp-teal-800) 100%);
  color: var(--yasp-paper);
  border-radius: var(--yasp-radius-lg);
  padding: 3.4rem 2.4rem 5.2rem;
  margin: 0 0 2.4rem;
}
.yasp-hero__pattern {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3.6rem;
  width: 100%;
  color: var(--yasp-paper);
  opacity: .18;
  pointer-events: none;
}
.yasp-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 34rem;
}
.md-typeset .yasp-eyebrow {
  font-family: var(--yasp-font-mono-display);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8FA9A3;
  margin: 0 0 1.2rem;
}
.md-typeset .yasp-hero h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -.025em;
  color: var(--yasp-paper);
  margin: 0 0 1rem;
}
.md-typeset .yasp-hero__lead {
  font-weight: 300;
  font-size: .9rem;
  line-height: 1.55;
  color: #C3D4CF;
  margin: 0;
}
.md-typeset .yasp-hero__lead b {
  font-weight: 500;
  color: var(--yasp-paper);
}

/* product cards */
.md-typeset .yasp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 1.2rem 0 2rem;
}
.md-typeset .yasp-card {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: 1.3rem 1.4rem 1.2rem;
  background: var(--yasp-surface);
  border: 1px solid var(--yasp-border);
  border-radius: var(--yasp-radius-lg);
  color: var(--md-typeset-color);
  text-decoration: none;
  transition: box-shadow var(--yasp-dur) var(--yasp-ease-out),
              transform var(--yasp-dur) var(--yasp-ease-out),
              border-color var(--yasp-dur) var(--yasp-ease-out);
}
.md-typeset .yasp-card:hover,
.md-typeset .yasp-card:focus {
  color: var(--md-typeset-color);
  text-decoration: none;
  box-shadow: var(--md-shadow-z2);
  border-color: var(--yasp-border-strong);
  transform: translateY(-2px);
}
.md-typeset .yasp-card__lockup {
  height: 1.1rem;
  width: auto;
  align-self: flex-start;
  margin-bottom: .5rem;
}
.md-typeset .yasp-card__role {
  font-size: .6rem;
  letter-spacing: var(--yasp-tracking-wide);
  text-transform: uppercase;
  color: var(--yasp-fg3);
}
.md-typeset .yasp-card__title {
  font-weight: 500;
  font-size: 1.05em;
  letter-spacing: -.011em;
}
.md-typeset .yasp-card__body {
  font-size: .7rem;
  line-height: 1.55;
  color: var(--yasp-fg2);
  flex: 1;
}
.md-typeset .yasp-card__more {
  font-weight: 500;
  font-size: .7rem;
  color: var(--yasp-accent);
  margin-top: .3rem;
}

/* two-command split */
.md-typeset .yasp-commands {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem 2rem;
  margin: 1rem 0 1.6rem;
}
.md-typeset .yasp-commands > div {
  border-top: 2px solid var(--yasp-teal);
  padding-top: .8rem;
}
.md-typeset .yasp-commands h3 {
  margin: 0 0 .4rem;
}
.md-typeset .yasp-commands p {
  font-size: .75rem;
  color: var(--yasp-fg2);
}

@media screen and (max-width: 44.9375em) {
  .yasp-hero {
    padding: 2.4rem 1.2rem 4.4rem;
    border-radius: var(--yasp-radius-md);
  }
}