/* =========================================================================
   Patrick's Blog — base palette & typography
   Minimal, monochrome, terminal-flavoured.
   ========================================================================= */

:root {
  /* Font stacks */
  --md-text-font: "Inter", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --md-code-font: "JetBrains Mono", "Fira Code", "SF Mono", Menlo, Consolas, monospace;

  /* Spacing */
  --pk-content-max: 44rem;
  --pk-rule: 1px solid var(--md-default-fg-color--lightest);
  /* Prompt bar (.md-path) height without border; the TOC title reuses it
     so both dividers sit on the same line. */
  --pk-path-pad-b: 0.65rem;
  --pk-path-h: calc(0.55rem + var(--pk-path-pad-b) + 0.76rem * 1.5);

  /* Light theme tuning */
  --md-default-fg-color: #111;
  --md-default-fg-color--light: #2a2a2a;
  --md-default-fg-color--lighter: #6b6b6b;
  --md-default-fg-color--lightest: #d8d8d8;
  --md-default-bg-color: #fbfbf9;        /* slight off-white, paper-like */
  --md-default-bg-color--light: #ffffff;
  --md-primary-fg-color: #111;
  --md-primary-fg-color--dark: #000;
  --md-primary-fg-color--light: #2a2a2a;
  --md-primary-bg-color: #fbfbf9;
  --md-primary-bg-color--light: #ffffff;
  --md-accent-fg-color: #111;
  --md-accent-fg-color--transparent: rgba(17, 17, 17, 0.1);
  --md-accent-bg-color: #fbfbf9;
  --md-accent-bg-color--light: #ffffff;
  --md-typeset-a-color: #111;
}

/* Re-declare on the element carrying the colour scheme: a var() inside a
   custom property is resolved where it's declared, so the :root value
   would keep the light-theme colour in dark mode. */
[data-md-color-scheme] {
  --pk-rule: 1px solid var(--md-default-fg-color--lightest);
}

/* Material's light scheme overrides --md-default-fg-color--lightest on
   <body>, so keep the light rule colour from :root explicitly. */
[data-md-color-scheme="default"] {
  --pk-rule: 1px solid #d8d8d8;
}

/* Override Material's per-attribute palette regardless of which palette
   primary/accent slot is currently set (auto, light, dark). Material's
   palette.css uses [data-md-color-primary="<name>"] selectors which take
   precedence over :root, so we re-pin our values on the same selector
   strength.  */
body[data-md-color-primary] {
  --md-primary-fg-color: var(--md-default-fg-color);
  --md-primary-fg-color--dark: #000;
  --md-primary-fg-color--light: var(--md-default-fg-color--light);
  --md-primary-bg-color: var(--md-default-bg-color);
  --md-primary-bg-color--light: var(--md-default-bg-color--light);
}

body[data-md-color-accent] {
  --md-accent-fg-color: var(--md-default-fg-color);
  --md-accent-fg-color--transparent: rgba(0, 0, 0, 0.08);
  --md-accent-bg-color: var(--md-default-bg-color);
  --md-accent-bg-color--light: var(--md-default-bg-color--light);
}

/* Dark theme tuning */
[data-md-color-scheme="slate"] {
  --md-default-fg-color: #e8e8e6;
  --md-default-fg-color--light: #c8c8c6;
  --md-default-fg-color--lighter: #8a8a88;
  --md-default-fg-color--lightest: #2a2a28;
  --md-default-bg-color: #0d0d0c;
  --md-default-bg-color--light: #131312;
  --md-primary-fg-color: #0d0d0c;
  --md-primary-fg-color--dark: #000;
  --md-accent-fg-color: #ffffff;
  --md-typeset-a-color: #f0f0ee;
  --md-code-bg-color: #161615;
  --md-code-fg-color: #d8d8d6;
}

/* =========================================================================
   Typography
   ========================================================================= */

.md-typeset {
  font-size: 0.82rem;            /* ~16.4px */
  line-height: 1.72;
  font-feature-settings: "kern", "liga", "calt";
  letter-spacing: -0.005em;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--md-default-fg-color);
}

/* Heading-anchor link: render a chain/link icon instead of the default ¶.
   The toc extension emits the literal `¶` glyph as text in the anchor;
   we push that text off-screen with text-indent and paint the icon via
   a CSS mask using currentColor, so Material's hover/opacity rules
   keep working unchanged. */
.md-typeset .headerlink {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  text-indent: -9999px;
  overflow: hidden;
  vertical-align: 0.04em;
  margin-left: 0.4em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M10.59%2013.41c.41.39.41%201.03%200%201.42-.39.39-1.03.39-1.42%200a5.003%205.003%200%200%201%200-7.07l3.54-3.54a5.003%205.003%200%200%201%207.07%200%205.003%205.003%200%200%201%200%207.07l-1.49%201.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.982%202.982%200%200%200%200-4.24%202.982%202.982%200%200%200-4.24%200l-3.53%203.53a2.982%202.982%200%200%200%200%204.24m2.82-4.24c.39-.39%201.03-.39%201.42%200a5.003%205.003%200%200%201%200%207.07l-3.54%203.54a5.003%205.003%200%200%201-7.07%200%205.003%205.003%200%200%201%200-7.07l1.49-1.49c-.01.82.12%201.64.4%202.43l-.47.47a2.982%202.982%200%200%200%200%204.24%202.982%202.982%200%200%200%204.24%200l3.53-3.53a2.982%202.982%200%200%200%200-4.24.973.973%200%200%201%200-1.42'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M10.59%2013.41c.41.39.41%201.03%200%201.42-.39.39-1.03.39-1.42%200a5.003%205.003%200%200%201%200-7.07l3.54-3.54a5.003%205.003%200%200%201%207.07%200%205.003%205.003%200%200%201%200%207.07l-1.49%201.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.982%202.982%200%200%200%200-4.24%202.982%202.982%200%200%200-4.24%200l-3.53%203.53a2.982%202.982%200%200%200%200%204.24m2.82-4.24c.39-.39%201.03-.39%201.42%200a5.003%205.003%200%200%201%200%207.07l-3.54%203.54a5.003%205.003%200%200%201-7.07%200%205.003%205.003%200%200%201%200-7.07l1.49-1.49c-.01.82.12%201.64.4%202.43l-.47.47a2.982%202.982%200%200%200%200%204.24%202.982%202.982%200%200%200%204.24%200l3.53-3.53a2.982%202.982%200%200%200%200-4.24.973.973%200%200%201%200-1.42'/%3E%3C/svg%3E") no-repeat center / contain;
}

.md-typeset h1 {
  font-size: 1.95rem;
  line-height: 1.15;
  margin: 0 0 1.2rem;
  border-bottom: var(--pk-rule);
  padding-bottom: 0.6rem;
}

.md-typeset h2 {
  font-size: 1.35rem;
  margin-top: 2.4rem;
  padding-bottom: 0.3rem;
  border-bottom: var(--pk-rule);
}

.md-typeset h3 { font-size: 1.1rem;  margin-top: 1.8rem; }
.md-typeset h4 { font-size: 0.95rem; margin-top: 1.4rem; }

/* Calm, generous paragraphs */
.md-typeset p { margin: 0.8em 0; }

/* Links: underline-on-hover, like a hypertext document should be */
.md-typeset a {
  color: var(--md-typeset-a-color);
  text-decoration: underline;
  text-decoration-color: var(--md-default-fg-color--lightest);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}

.md-typeset a:hover {
  text-decoration-color: var(--md-default-fg-color);
  color: var(--md-default-fg-color);
}

/* Inline code: subtle, monospace */
.md-typeset code {
  font-size: 0.82em;
  background: var(--md-code-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 3px;
  padding: 0.05rem 0.35rem;
}

[data-md-color-scheme="default"] {
  --md-code-bg-color: #f3f3ef;
  --md-code-fg-color: #1d1d1b;
}

/* Code blocks: cleaner border, no shadow */
.md-typeset .highlight,
.md-typeset pre > code {
  border-radius: 4px;
}

.md-typeset pre > code {
  font-size: 0.78rem;
  line-height: 1.6;
  padding: 0.9rem 1rem;
}

.highlight .filename {
  font-family: var(--md-code-font);
  font-size: 0.72rem;
  color: var(--md-default-fg-color--lighter);
  background: transparent;
  border-bottom: var(--pk-rule);
  padding: 0.3rem 0.7rem;
}

/* Blockquote: classic terminal vertical bar */
.md-typeset blockquote {
  border-left: 2px solid var(--md-default-fg-color);
  color: var(--md-default-fg-color--light);
  padding-left: 1rem;
  margin: 1.2rem 0;
  font-style: normal;
}

/* Horizontal rules: thin and quiet */
.md-typeset hr {
  border: none;
  border-top: var(--pk-rule);
  margin: 2.4rem 0;
}

/* Tables: monochrome */
.md-typeset table:not([class]) {
  border: var(--pk-rule);
  font-size: 0.78rem;
}

.md-typeset table:not([class]) th {
  background: var(--md-default-bg-color--light);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.7rem;
}

.md-typeset table:not([class]) td,
.md-typeset table:not([class]) th {
  border-color: var(--md-default-fg-color--lightest);
}

/* =========================================================================
   Header / top navigation
   -------------------------------------------------------------------------
   Material forces the header background to a fixed dark colour via the
   `[data-md-color-primary="black"] .md-header` rule (higher specificity
   than ours). So the header is dark in *both* light and dark mode — and
   we paint the foreground accordingly: always a light, off-white colour
   so that the text is the inverse of the page text in light mode and
   still readable in dark mode.
   ========================================================================= */

:root {
  --pk-header-fg: #fbfbf9;            /* readable on the always-dark header */
  --pk-header-fg-muted: rgba(251, 251, 249, 0.6);
}

.md-header,
.md-tabs {
  color: var(--pk-header-fg);
  box-shadow: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.25s ease;
}

/* A little breathing room so the title clears the tab row below. */
.md-header__inner {
  padding-top: 0.15rem;
  padding-bottom: 0.45rem;
  align-items: center;
}

.md-tabs__list { padding-top: 0.15rem; }

.md-header__title {
  font-family: var(--md-code-font);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: -0.01em;
  color: var(--pk-header-fg);
  align-self: center;
}

.pk-site-name {
  color: var(--pk-header-fg);
  text-decoration: none;
  font-weight: 600;
}

.pk-site-name:hover {
  text-decoration: underline;
  text-decoration-color: var(--pk-header-fg-muted);
  text-underline-offset: 3px;
}

/* Buttons + source link follow header fg */
.md-header__button,
.md-header__option,
.md-header__source {
  color: var(--pk-header-fg);
}

/* Tabs (top-level sections) rendered as [bracket] items */
.md-tabs__link {
  font-family: var(--md-code-font);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--pk-header-fg);
  opacity: 0.65;
  margin-top: 0.6rem;
  transition: opacity 0.15s ease;
}

.md-tabs__link::before { content: "["; opacity: 0.5; }
.md-tabs__link::after  { content: "]"; opacity: 0.5; }

.md-tabs__link:hover,
.md-tabs__link--active {
  opacity: 1;
}

.md-tabs__link--active::before,
.md-tabs__link--active::after {
  opacity: 1;
}

/* Search */
.md-search__form {
  background: var(--md-default-bg-color--light);
  border: var(--pk-rule);
  border-radius: 3px;
}

.md-search__input {
  font-family: var(--md-code-font);
  font-size: 0.78rem;
}

.md-search__input::placeholder {
  color: var(--md-default-fg-color--lighter);
}

/* =========================================================================
   Sidebar / nav
   ========================================================================= */

.md-nav {
  font-size: 0.74rem;
}

.md-nav__title {
  font-family: var(--md-code-font);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--md-default-fg-color--lighter);
  font-weight: 500;
}

.md-nav__link {
  color: var(--md-default-fg-color--light);
  transition: color 0.15s ease;
}

.md-nav__link:hover,
.md-nav__link--active {
  color: var(--md-default-fg-color);
}

.md-nav__link--active {
  font-weight: 600;
}

/* Hierarchical indentation in the primary sidebar so child items sit
   under their parent section. Material only applies a flat 0.6rem to
   every .md-nav__list regardless of depth — these rules add a
   per-level step so sections read as outlined trees.

   NOTE: we only target the *outermost* row element per item, which is a
   direct child of .md-nav__item. For a leaf, that's the <a>; for a
   nested section, that's the <div.md-nav__container> (which also carries
   the md-nav__link class). We deliberately do NOT also pad the inner
   <a>/<label> inside the container — otherwise the padding adds twice
   and a level-1 section ends up at the same x-offset as a level-2
   leaf. */
[dir=ltr] .md-nav--primary .md-nav[data-md-level="1"] > .md-nav__list > .md-nav__item > .md-nav__link {
  padding-left: 0.9rem;
}

[dir=ltr] .md-nav--primary .md-nav[data-md-level="2"] > .md-nav__list > .md-nav__item > .md-nav__link {
  padding-left: 1.8rem;
}

[dir=ltr] .md-nav--primary .md-nav[data-md-level="3"] > .md-nav__list > .md-nav__item > .md-nav__link {
  padding-left: 2.7rem;
}

[dir=ltr] .md-nav--primary .md-nav[data-md-level="4"] > .md-nav__list > .md-nav__item > .md-nav__link {
  padding-left: 3.6rem;
}

/* Section labels: tiny monospace */
.md-nav--secondary .md-nav__title {
  background: transparent;
  box-shadow: none;
  border-bottom: var(--pk-rule);
}

/* Right-hand TOC (a separate sidebar from 60em): make its divider line up
   with the prompt bar's. 1.2rem is Material's .md-sidebar padding. */
@media screen and (min-width: 60em) {
  .md-sidebar--secondary .md-nav--secondary > .md-nav__title {
    box-sizing: content-box;
    height: calc(var(--pk-path-h) - 1.2rem);
    padding: 0;
    display: flex;
    align-items: flex-end;
  }
}

/* =========================================================================
   Content
   ========================================================================= */

.md-content {
  max-width: var(--pk-content-max);
  margin: 0 auto;
}

/* Gap below the header. It's padding inside the content and the sidebars
   (not a margin on .md-main__inner) so the sticky sidebars start where
   they get pinned and don't move up when scrolling. */
.md-main__inner {
  margin-top: 0;
}

.md-content {
  padding-top: 1.6rem;
}

/* Sidebars are only in-page (not drawers) from these widths on. They pin
   right below the header; --pk-header-h is set by header-height.js.
   The `.md-header ~ .md-container` prefix out-ranks Material's own
   `.md-header--lifted ~ .md-container .md-sidebar { top: 4.8rem }`. */
@media screen and (min-width: 60em) {
  .md-header ~ .md-container .md-sidebar--secondary {
    padding-top: calc(1.2rem + 1.6rem);
    top: var(--pk-header-h, 4.8rem);
  }
}

@media screen and (min-width: 76.25em) {
  .md-header ~ .md-container .md-sidebar--primary {
    padding-top: calc(1.2rem + 1.6rem);
    top: var(--pk-header-h, 4.8rem);
  }
}

/* =========================================================================
   Breadcrumbs (.md-path) rendered as a bash PS1 working-directory line:
       patrick@blog:~/projects/teletypes/t68$ ▮
   The first breadcrumb item ("home") is replaced by a tilde via CSS so
   the path looks exactly like a shell `pwd` would print.
   ========================================================================= */

.md-path {
  font-family: var(--md-code-font);
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--md-default-fg-color--light);
  border-bottom: var(--pk-rule);
  padding: 0.55rem 0 var(--pk-path-pad-b);
  margin: 0 0 1.4rem;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0;
}

/* `patrick@blog:` PS1 prefix */
.md-path::before {
  content: "patrick@blog";
  color: var(--md-default-fg-color--lighter);
  font-weight: 500;
  margin-right: 0.05em;
}

/* The blinking cursor must visually sit AFTER the `$`. Pseudo-elements
   render in DOM order: .md-path__list::after fires *inside* the <ol>
   (so right after the last breadcrumb item), and .md-path::after fires
   after the <ol> closes. We put `$` on the inner one and the cursor
   on the outer one so the result reads `… items $ ▮`. */
.md-path::after {
  content: "";
  display: inline-block;
  width: 0.45em;
  height: 0.95em;
  background: var(--md-default-fg-color);
  margin-left: 0.2em;
  vertical-align: -0.1em;
  animation: pk-blink 1.1s steps(2) infinite;
  align-self: center;
}

.md-path__list {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  padding: 0;
  margin: 0;
  list-style: none;
}

.md-path__list::before {
  content: ":";
  color: var(--md-default-fg-color--lighter);
  margin-right: 0;
}

.md-path__list::after {
  content: "$";
  color: var(--md-default-fg-color);
  font-weight: 700;
  margin-left: 0.35em;
}

.md-path__item {
  display: inline-flex;
  align-items: baseline;
}

/* `/` between segments — overrides Material's chevron mask-icon. The
   selector mirrors Material's `.md-path__item:not(:first-child)::before`
   to match its specificity, and we explicitly clear the mask + sizing
   so the text glyph is what's actually painted. */
.md-path .md-path__item:not(:first-child)::before {
  content: "/";
  color: var(--md-default-fg-color--lighter);
  background: transparent;
  -webkit-mask-image: none;
  mask-image: none;
  width: auto;
  height: auto;
  display: inline-block;
  margin: 0 0.05em;
  font-family: var(--md-code-font);
}

.md-path__link {
  color: var(--md-default-fg-color--light);
  text-decoration: none;
  padding: 0 0.05em;
}

.md-path__link:hover {
  color: var(--md-default-fg-color);
  text-decoration: underline;
  text-decoration-color: var(--md-default-fg-color--lighter);
  text-underline-offset: 3px;
}

/* The very first breadcrumb item is the "home" link. Replace its label
   with a literal `~` so the result reads `~/projects/...` like a shell. */
.md-path__item:first-child .md-path__link .md-ellipsis {
  font-size: 0;             /* hide text but keep accessible name */
}

.md-path__item:first-child .md-path__link .md-ellipsis::before {
  content: "~";
  font-size: 0.76rem;       /* match .md-path */
  color: var(--md-default-fg-color);
  font-weight: 500;
}

/* On narrow screens, shrink the prefix to keep the path readable. */
@media screen and (max-width: 44.9375em) {
  .md-path { font-size: 0.7rem; padding: 0.45rem 0 0.55rem; }
  .md-path::before { content: "blog"; }   /* drop the user part on mobile */
}

/* Previous / next footer nav */
.md-footer__inner.md-grid {
  border-top: var(--pk-rule);
}

.md-footer__link {
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

.md-footer__link:hover { opacity: 1; }

.md-footer__title {
  font-family: var(--md-code-font);
  font-size: 0.78rem;
  font-weight: 500;
}

/* The footer-meta strip stays Material-dark in both light and dark mode
   — mirroring the always-dark header so the page has a consistent
   "framed terminal" look. We don't override background or link colours
   here: Material's defaults paint light text on the dark bar correctly
   in both schemes. */
.md-footer-meta .md-footer-meta__inner {
  font-size: 0.72rem;
}

/* Footer custom legal row */
.pk-legal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-family: var(--md-code-font);
  font-size: 0.72rem;
  padding: 0.4rem 0 0;
}

.pk-legal-row a::before { content: "["; opacity: 0.55; }
.pk-legal-row a::after  { content: "]"; opacity: 0.55; }

/* =========================================================================
   Admonitions: flatter, monochrome
   ========================================================================= */

.md-typeset .admonition,
.md-typeset details {
  border: var(--pk-rule);
  border-left: 3px solid var(--md-default-fg-color);
  border-radius: 3px;
  font-size: 0.78rem;
  background: var(--md-default-bg-color--light);
  box-shadow: none;
}

.md-typeset .admonition-title,
.md-typeset summary {
  background: transparent;
  font-family: var(--md-code-font);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.md-typeset .admonition-title::before,
.md-typeset summary::before {
  background-color: var(--md-default-fg-color);
}

/* =========================================================================
   Images & figures
   ========================================================================= */

.md-typeset img,
.md-typeset svg {
  max-width: 100%;
  height: auto;
  border-radius: 3px;
}

.md-typeset figure {
  margin: 1.4rem auto;
  text-align: center;
}

.md-typeset figcaption {
  font-family: var(--md-code-font);
  font-size: 0.7rem;
  color: var(--md-default-fg-color--lighter);
  margin-top: 0.4rem;
  letter-spacing: 0.01em;
}

/* glightbox tweak — match palette */
.glightbox-clean .gslide-description {
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
}

.glightbox-clean .gdesc-inner { padding: 16px; }

/* =========================================================================
   Mermaid: bg transparent, monochrome leaning
   ========================================================================= */

.md-typeset .mermaid {
  text-align: center;
  margin: 1.4rem 0;
  background: transparent;
}

.md-typeset .mermaid svg {
  max-width: 100%;
  height: auto;
}

/* =========================================================================
   Tags & footnotes
   ========================================================================= */

.md-typeset .footnote {
  font-size: 0.74rem;
  border-top: var(--pk-rule);
  padding-top: 0.8rem;
}

.md-typeset .footnote-ref {
  font-family: var(--md-code-font);
}

/* =========================================================================
   Hero block (used on home page)
   ========================================================================= */

.pk-hero {
  margin: 0.8rem 0 2.4rem;
  font-family: var(--md-code-font);
  border: var(--pk-rule);
  border-radius: 4px;
  padding: 1.1rem 1.2rem;
  background: var(--md-default-bg-color--light);
  position: relative;
  overflow: hidden;
}

.pk-hero__prompt {
  font-size: 0.78rem;
  color: var(--md-default-fg-color--lighter);
  margin: 0 0 0.4rem;
}

.pk-hero__prompt::before {
  content: "$ ";
  color: var(--md-default-fg-color);
}

.pk-hero__title {
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0 0 0.2rem;
  letter-spacing: -0.01em;
  font-family: var(--md-text-font);
}

.pk-hero__tag {
  font-size: 0.78rem;
  color: var(--md-default-fg-color--light);
}

.pk-hero__cursor {
  display: inline-block;
  width: 0.5em;
  height: 1em;
  vertical-align: text-bottom;
  background: var(--md-default-fg-color);
  margin-left: 0.2em;
  animation: pk-blink 1.1s steps(2) infinite;
}

@keyframes pk-blink {
  0%, 50%  { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Card grid for landing index pages */
.pk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.9rem;
  margin: 1.2rem 0;
}

.pk-card {
  display: block;
  padding: 0.9rem 1rem;
  border: var(--pk-rule);
  border-radius: 4px;
  text-decoration: none !important;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
  background: var(--md-default-bg-color);
}

.pk-card:hover {
  border-color: var(--md-default-fg-color);
  transform: translateY(-1px);
}

.pk-card__kind {
  font-family: var(--md-code-font);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--md-default-fg-color--lighter);
}

.pk-card__title {
  font-weight: 600;
  margin: 0.2rem 0 0.3rem;
  font-size: 0.92rem;
}

.pk-card__desc {
  font-size: 0.76rem;
  color: var(--md-default-fg-color--light);
  line-height: 1.55;
}

/* =========================================================================
   Mobile tweaks
   ========================================================================= */

@media screen and (max-width: 76.1875em) {
  .md-content { max-width: none; padding: 1.6rem 0.4rem 0; }
  .md-nav__title { padding-top: 0.6rem; }
}

@media screen and (max-width: 44.9375em) {
  .md-typeset { font-size: 0.84rem; line-height: 1.7; }
  .md-typeset h1 { font-size: 1.55rem; }
  .md-typeset h2 { font-size: 1.2rem; }
  .md-typeset pre > code { font-size: 0.72rem; }
  .pk-hero { padding: 0.9rem 1rem; }
  .pk-hero__title { font-size: 1.15rem; }
  .pk-grid { grid-template-columns: 1fr; }
  .md-header__title::before { content: ""; }
}

/* =========================================================================
   Print
   ========================================================================= */
@media print {
  .md-header, .md-tabs, .md-sidebar, .md-footer { display: none !important; }
  .md-content { max-width: 100%; }
}

/* DRAFT banner on draft pages (only rendered by `mkdocs serve`) */
.md-typeset .mkdocs-draft-marker {
  margin: 0 0 1.5em;
  padding: 0.4em 0.8em;
  border: 1px dashed var(--md-default-fg-color--lighter);
  color: var(--md-default-fg-color--light);
  font-family: var(--md-code-font);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-align: center;
}