@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono Nerd Font";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrains-mono-nerd-400.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono Nerd Font";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/jetbrains-mono-nerd-600.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2");
}

/* Exact sRGB values: https://ethanschoonover.com/solarized/#the-values */
:root {
  --solarized-base03: #002b36;
  --solarized-base02: #073642;
  --solarized-base01: #586e75;
  --solarized-base00: #657b83;
  --solarized-base0: #839496;
  --solarized-base1: #93a1a1;
  --solarized-base2: #eee8d5;
  --solarized-base3: #fdf6e3;
  --solarized-yellow: #b58900;
  --solarized-orange: #cb4b16;
  --solarized-red: #dc322f;
  --solarized-magenta: #d33682;
  --solarized-violet: #6c71c4;
  --solarized-blue: #268bd2;
  --solarized-cyan: #2aa198;
  --solarized-green: #859900;
  color-scheme: light;
  --ink: var(--solarized-base01);
  --ink-2: var(--solarized-base01);
  --ink-3: var(--solarized-base01);
  --rule: var(--solarized-base1);
  --rail: var(--solarized-base2);
  --paper: var(--solarized-base3);
  --accent: var(--solarized-blue);
  --accent-ink: var(--solarized-base02);
  --rail-ink: var(--solarized-base02);
  --card-ink: var(--solarized-base02);
  --tone-blue: var(--solarized-blue);
  --tone-violet: var(--solarized-violet);
  --tone-orange: var(--solarized-orange);
  --tone-green: var(--solarized-green);
  --tone-magenta: var(--solarized-magenta);
  --tone-cyan: var(--solarized-cyan);
  --tone-yellow: var(--solarized-yellow);
  --tone-red: var(--solarized-red);
  --sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:
    "JetBrains Mono Nerd Font", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-11: 44px;
  --space-12: 48px;
  --radius: 4px;
  --radius-lg: 12px;
  --text-small: 0.875rem;
  --text-body: 1rem;
  --text-lead: 1.09375rem;
  --text-section: 1.375rem;
  --text-title: 1.75rem;
  --leading: 1.55;
  --measure: 68ch;
  --control-inset: max(16px, env(safe-area-inset-right));
  --control-gutter: calc(var(--control-inset) + 48px);
  /* Six accents as hard stops, in the résumé's order; a decorative identity rule. */
  --accent-band: linear-gradient(
    to right,
    var(--solarized-blue) 0% 16.6667%,
    var(--solarized-cyan) 16.6667% 33.3333%,
    var(--solarized-green) 33.3333% 50%,
    var(--solarized-yellow) 50% 66.6667%,
    var(--solarized-orange) 66.6667% 83.3333%,
    var(--solarized-magenta) 83.3333% 100%
  );
  /* Accent tints: quiet surfaces derived from each exact accent's hue. Without relative color
     support they fall back to the neutral raised surface. */
  --tint-blue: var(--rail);
  --tint-cyan: var(--rail);
  --tint-green: var(--rail);
  --tint-yellow: var(--rail);
  --tint-orange: var(--rail);
  --tint-red: var(--rail);
  --tint-magenta: var(--rail);
  --tint-violet: var(--rail);
  /* Quiet panels: paper in light, the raised neutral in dark, edged by a faint rule. */
  --panel: var(--solarized-base3);
  --panel-ink: var(--solarized-base01);
  --panel-border: var(--solarized-base2);
  --panel-divider: var(--solarized-base2);
  /* A soft shadow in light themes only. Without relative color support it is simply absent. */
  --shadow-color: transparent;
  --elevation: 0 1px 2px var(--shadow-color), 0 8px 24px var(--shadow-color);
}
@supports (color: light-dark(white, black)) {
  :root {
    color-scheme: light dark;
    --ink: light-dark(var(--solarized-base01), var(--solarized-base1));
    --ink-2: light-dark(var(--solarized-base01), var(--solarized-base1));
    --ink-3: light-dark(var(--solarized-base01), var(--solarized-base1));
    --rule: light-dark(var(--solarized-base1), var(--solarized-base01));
    --rail: light-dark(var(--solarized-base2), var(--solarized-base02));
    --paper: light-dark(var(--solarized-base3), var(--solarized-base03));
    --accent-ink: light-dark(var(--solarized-base02), var(--solarized-base1));
    --rail-ink: light-dark(var(--solarized-base02), var(--solarized-base1));
    --card-ink: light-dark(var(--solarized-base02), var(--solarized-base1));
    --panel: light-dark(var(--solarized-base3), var(--solarized-base02));
    --panel-ink: light-dark(var(--solarized-base01), var(--solarized-base1));
    --panel-border: light-dark(var(--solarized-base2), var(--solarized-base01));
    --panel-divider: light-dark(var(--solarized-base2), var(--solarized-base03));
  }
  :root:where([data-theme="light"]) {
    color-scheme: light;
  }
  :root:where([data-theme="dark"]) {
    color-scheme: dark;
  }
}
/* Derived only from the exact accents' hues: lightness and chroma change, never the hue. */
@supports (color: oklch(from red l c h)) and (color: light-dark(white, black)) {
  :root {
    --tint-blue: light-dark(
      oklch(from var(--solarized-blue) 94% 0.025 h),
      oklch(from var(--solarized-blue) 28% 0.025 h)
    );
    --tint-cyan: light-dark(
      oklch(from var(--solarized-cyan) 94% 0.025 h),
      oklch(from var(--solarized-cyan) 28% 0.025 h)
    );
    --tint-green: light-dark(
      oklch(from var(--solarized-green) 94% 0.025 h),
      oklch(from var(--solarized-green) 28% 0.025 h)
    );
    --tint-yellow: light-dark(
      oklch(from var(--solarized-yellow) 94% 0.025 h),
      oklch(from var(--solarized-yellow) 28% 0.025 h)
    );
    --tint-orange: light-dark(
      oklch(from var(--solarized-orange) 94% 0.025 h),
      oklch(from var(--solarized-orange) 28% 0.025 h)
    );
    --tint-red: light-dark(
      oklch(from var(--solarized-red) 94% 0.025 h),
      oklch(from var(--solarized-red) 28% 0.025 h)
    );
    --tint-magenta: light-dark(
      oklch(from var(--solarized-magenta) 94% 0.025 h),
      oklch(from var(--solarized-magenta) 28% 0.025 h)
    );
    --tint-violet: light-dark(
      oklch(from var(--solarized-violet) 94% 0.025 h),
      oklch(from var(--solarized-violet) 28% 0.025 h)
    );
  }
}
/* The one place color takes transparency: a shadow of the darkest Solarized base, light only. */
@supports (color: oklch(from red l c h / 50%)) and (color: light-dark(white, black)) {
  :root {
    --shadow-color: light-dark(oklch(from var(--solarized-base03) l c h / 7%), transparent);
  }
}

* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-block: 80px;
}
body {
  margin: 0;
  overflow-wrap: anywhere;
  font-family: var(--sans);
  font-size: var(--text-body);
  line-height: var(--leading);
  color: var(--ink);
  background: var(--paper);
}
a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover {
  color: var(--accent-ink);
}
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
code,
.mono {
  font-family: var(--mono);
  font-size: 0.92em;
}
code,
.mono,
h1,
.section-title,
.theme-toggle,
.action {
  font-variant-ligatures: common-ligatures contextual;
}
code {
  color: var(--rail-ink);
  background: var(--rail);
  padding: 0.05em 0.35em;
  border-radius: 3px;
}

h1 {
  font-family: var(--mono);
  font-size: var(--text-title);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
}
h2,
h3,
h4 {
  line-height: 1.3;
}
p {
  margin: 0 0 var(--space-4);
}
.lead {
  font-size: var(--text-lead);
  max-width: var(--measure);
}
.muted {
  color: var(--ink-3);
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 20;
  transform: translateY(-200%);
  background: var(--paper);
  padding: 10px 16px;
  border: 2px solid var(--accent);
}
.skip-link:focus {
  transform: none;
}
#main {
  scroll-margin-top: 16px;
}
#main:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.theme-toggle {
  position: fixed;
  right: var(--control-inset);
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 10;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: 0;
  appearance: none;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-family: var(--mono);
  line-height: 1;
}
.theme-toggle:hover {
  color: var(--accent-ink);
}
.nerd-icon {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1;
}
.theme-toggle .nerd-icon {
  display: inline-block;
  font-size: 22px;
}
.section-icon {
  display: inline-block;
  width: 1.5em;
  font-size: 17px;
  vertical-align: 0.02em;
  color: var(--section-accent, var(--accent));
}
.action {
  font-family: var(--mono);
  background: var(--paper);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--section-accent, var(--accent));
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
/* The hover invert stays instant on purpose: transitioning it interpolates through
   mid-contrast colours, and the reference page's axe check samples that state. */
.action:hover {
  background: var(--ink);
  color: var(--paper);
}

.text-list {
  margin: 0;
  padding-left: 18px;
}
.text-list > li {
  margin: 0 0 12px;
  padding-left: 4px;
}
.text-list > li::marker {
  font-family: var(--mono);
  color: var(--list-accent, var(--section-accent, var(--accent)));
  font-weight: 600;
}
.text-list strong {
  font-weight: 600;
}
.supporting-details {
  margin-top: 8px;
}
.supporting-details > li {
  margin-bottom: 6px;
}
ul.text-list > li::marker {
  content: "› ";
}
ul.supporting-details > li::marker {
  content: "· ";
}
.text-list > li:last-child {
  margin-bottom: 0;
}
.content-section {
  --section-accent: var(--accent);
  --card-background: var(--rail);
}
.section-title {
  font-family: var(--mono);
  text-transform: lowercase;
  font-size: var(--text-section);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--section-accent, var(--accent));
}
.content-section a:where(:not(.action)) {
  color: var(--ink);
}
.content-section a:where(:not(.action)):hover {
  color: var(--accent-ink);
}
.surface {
  --ink: var(--card-ink);
  --ink-2: var(--card-ink);
  --ink-3: var(--card-ink);
  padding: var(--card-padding, var(--space-4));
  color: var(--ink);
  background: var(--card-background, var(--rail));
  border: 0;
  border-radius: var(--radius);
  font-size: var(--text-body);
  line-height: var(--leading);
}

.surface > :last-child {
  margin-bottom: 0;
}
/* A surface that takes its accent's tint, for grouping by color without relying on it. */
.surface[data-tint] {
  --card-background: var(--section-tint, var(--rail));
}
:where(.surface) code {
  color: var(--ink);
  background: var(--paper);
}
.stack {
  display: grid;
  gap: var(--space-6);
}
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
}
.status {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--ink);
}
[data-accent="blue"] {
  --section-accent: var(--tone-blue);
  --section-tint: var(--tint-blue);
}
[data-accent="violet"] {
  --section-accent: var(--tone-violet);
  --section-tint: var(--tint-violet);
}
[data-accent="orange"] {
  --section-accent: var(--tone-orange);
  --section-tint: var(--tint-orange);
}
[data-accent="green"] {
  --section-accent: var(--tone-green);
  --section-tint: var(--tint-green);
}
[data-accent="magenta"] {
  --section-accent: var(--tone-magenta);
  --section-tint: var(--tint-magenta);
}
[data-accent="cyan"] {
  --section-accent: var(--tone-cyan);
  --section-tint: var(--tint-cyan);
}
[data-accent="yellow"] {
  --section-accent: var(--tone-yellow);
  --section-tint: var(--tint-yellow);
}
[data-accent="red"] {
  --section-accent: var(--tone-red);
  --section-tint: var(--tint-red);
}
@media print {
  ul.text-list > li::marker {
    content: normal;
    color: #000;
  }
  ul.supporting-details > li::marker {
    content: "· ";
  }
  :root {
    color-scheme: light;
    --paper: #fff;
    --rail: #fff;
    --ink: #000;
    --ink-2: #333;
    --ink-3: #444;
    --accent: #000;
    --accent-ink: #000;
    --rail-ink: #000;
    --card-ink: #000;
  }
  body {
    background: #fff;
    color: #000;
  }
  .content-section,
  [data-accent] {
    --section-accent: #000;
  }
  .surface {
    background: none;
    color: #000;
  }
  .section-title {
    font-family: var(--sans);
    text-transform: none;
    color: #000;
    border-color: #bbb;
  }
  .theme-toggle,
  .skip-link {
    display: none;
  }
  a {
    color: #000;
  }
}
@media (forced-colors: active) {
  .surface {
    outline: 1px solid CanvasText;
  }
  .section-title {
    border-color: CanvasText;
  }
  .status {
    color: CanvasText;
  }
}

.entry-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-1) var(--space-4);
}
.entry-title {
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}
.meta {
  color: var(--ink-3);
  font-size: 0.84375rem;
  line-height: 1.4;
  margin: 0;
}
.facts {
  margin: 0;
  font-size: var(--text-small);
}
.facts dt {
  font-weight: 500;
  margin-top: var(--space-2);
}
.facts dd {
  margin: 0;
  color: var(--ink-2);
}

.status::before {
  content: "";
  display: inline-block;
  width: 0.65em;
  height: 0.65em;
  margin-right: var(--space-2);
  background: var(--section-accent, var(--accent));
}

/* Scaffolding for single-column sites: a reading column, a masthead with primary navigation,
   a list of posts, and a page footer. Pages still own anything beyond one column. */
.page-column {
  max-width: calc(var(--measure) + var(--space-8) + var(--control-gutter));
  margin-inline: auto;
  /* The bottom clears the floating theme control: its offset, its 44px height, and a little air. */
  padding: var(--space-8) var(--control-gutter)
    calc(max(16px, env(safe-area-inset-bottom)) + 44px + var(--space-4)) var(--space-8);
}
.page-column main > * + * {
  margin-top: var(--space-12);
}
.article-header {
  margin-bottom: var(--space-6);
}
.article-header h1 {
  margin-bottom: var(--space-1);
}
.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-6);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--rule);
}
.masthead-title {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--text-section);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.masthead-title a,
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}
.masthead-title a:hover,
.site-nav a:hover {
  color: var(--accent-ink);
  text-decoration: underline;
}
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a {
  font-family: var(--mono);
  font-size: var(--text-small);
}
.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.post-list {
  display: grid;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.post-list .entry-heading {
  margin-bottom: var(--space-1);
}
.post-list p:not(.meta) {
  max-width: var(--measure);
  margin: 0;
  color: var(--ink-2);
}
.page-footer {
  margin-top: var(--space-12);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
  font-size: var(--text-small);
  color: var(--ink-3);
}
.page-footer p {
  margin: 0 0 var(--space-2);
}
.page-footer > :last-child {
  margin-bottom: 0;
}
@media (max-width: 700px) {
  .page-column {
    padding-top: var(--space-6);
    padding-left: var(--space-4);
  }
}
@media print {
  .page-column {
    max-width: none;
    padding: 0;
  }
  .site-nav {
    display: none;
  }
  .masthead,
  .page-footer {
    border-color: #bbb;
  }
}
@media (forced-colors: active) {
  .masthead,
  .page-footer {
    border-color: CanvasText;
  }
  .site-nav a[aria-current="page"] {
    text-decoration-color: LinkText;
  }
}

/* Shared site patterns: an identity band, timelines, cards, chips, and reading aids. Each takes
   its color from the nearest data-accent and stays legible without that color. */

/* Identity */
.accent-band {
  display: block;
  height: 4px;
  margin: 0;
  border: 0;
  background: var(--accent-band);
}
.masthead-title--identity {
  font-family: var(--sans);
  font-size: var(--text-title);
  font-weight: 700;
  letter-spacing: -0.02em;
}
/* Bold 28px is large text, so the exact blue meets its 3:1 contrast on both papers. */
.masthead-title--identity a {
  color: var(--solarized-blue);
}
.masthead--band {
  position: relative;
  padding-bottom: var(--space-3);
  border-bottom: 0;
}
.masthead--band::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  background: var(--accent-band);
}

/* Metadata and navigation between pages */
.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-4);
}
.pager {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule);
}
.pager a {
  display: grid;
  gap: var(--space-1);
  min-height: 44px;
  align-content: center;
  color: var(--ink);
  font-weight: 600;
}
.pager a[rel="next"] {
  text-align: end;
}

/* Timeline: a rail with one marker per item, each in its item's accent. */
.timeline-list {
  --timeline-axis: 5px;
  --timeline-top: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.timeline-list > li {
  position: relative;
  padding-block: 0 var(--space-6);
  padding-inline: calc(var(--timeline-axis) * 2 + var(--space-6)) 0;
}
.timeline-list > li:last-child {
  padding-block-end: 0;
}
/* The rail below each marker belongs to its item, so accents change where items do. */
.timeline-list > li::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--timeline-axis) - 1px);
  top: var(--timeline-top);
  bottom: 0;
  width: 2px;
  background: var(--section-accent, var(--accent));
}
.timeline-list > li::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: var(--timeline-top);
  width: calc(var(--timeline-axis) * 2);
  height: calc(var(--timeline-axis) * 2);
  border-radius: 50%;
  background: var(--section-accent, var(--accent));
}
/* Larger markers for logos or initials: set the axis to half the marker's size. */
.timeline-list--marked {
  --timeline-axis: 20px;
  --timeline-top: 0px;
}
.timeline-list--marked > li::before {
  top: calc(var(--timeline-axis) * 2);
}
.timeline-list--marked > li::after {
  display: none;
}
.timeline-marker {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: calc(var(--timeline-axis) * 2);
  height: calc(var(--timeline-axis) * 2);
  border: 2px solid var(--section-accent, var(--accent));
  border-radius: 50%;
  background: var(--paper);
  /* The strongest ink on paper; initials are small, so they need it more than an accent. */
  color: var(--accent-ink);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.timeline-marker svg,
.timeline-marker img {
  display: block;
  width: 60%;
  height: 60%;
}

/* Cards: tinted surfaces with an accent edge, in a grid that reflows to one column. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-min, 11rem)), 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.card {
  --ink: var(--card-ink);
  --ink-2: var(--card-ink);
  --ink-3: var(--card-ink);
  position: relative;
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--section-tint, var(--rail));
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--section-accent, var(--accent));
}
.card > :first-child {
  margin-top: 0;
}
.card > :last-child {
  margin-bottom: 0;
}
.card a {
  color: var(--ink);
}
.card a:hover {
  color: var(--accent-ink);
}

/* Chips: static tags, such as skills or post topics. */
.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 8px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
}
.chip .nerd-icon {
  font-size: 12px;
  color: var(--section-accent, var(--accent));
}

/* A reading bar that fills as the page scrolls. It needs no script, rests empty when the page
   cannot scroll, and is omitted without scroll timelines or when motion is reduced. */
.read-progress {
  display: none;
}
@supports (animation-timeline: scroll()) {
  .read-progress {
    display: block;
    position: fixed;
    inset: 0 0 auto;
    z-index: 5;
    height: 3px;
    background: var(--accent-band);
    transform: scaleX(0);
    transform-origin: left;
    animation: read-progress linear both;
    animation-timeline: scroll(root);
  }
  @keyframes read-progress {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .read-progress {
    display: none;
  }
}

@media print {
  .accent-band,
  .masthead--band::after,
  .timeline-list > li::before,
  .timeline-list > li::after,
  .card::before,
  .read-progress,
  .pager {
    display: none;
  }
  .card {
    background: none;
    border: 1px solid #93a1a1;
  }
  .timeline-marker {
    border-color: #93a1a1;
  }
}
@media (forced-colors: active) {
  .accent-band,
  .masthead--band::after,
  .timeline-list > li::before,
  .timeline-list > li::after,
  .card::before,
  .read-progress {
    background: CanvasText;
  }
  .timeline-marker,
  .chip {
    border-color: CanvasText;
  }
  .card {
    outline: 1px solid CanvasText;
  }
}

/* Quiet patterns for dashboards and status pages: bordered panels with rows, status states,
   callouts, and small section labels. Color appears only where a state or an accent calls for
   it: marked rows and tinted callouts. */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.masthead--plain {
  border-bottom: 0;
}

/* A small, muted heading for a group of panels. */
.section-label {
  margin: 0 0 var(--space-3);
  font-family: var(--sans);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
}

/* Numbers that line up in columns and never break. */
.numeric {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Panels */
.panel {
  --ink: var(--panel-ink);
  --ink-2: var(--panel-ink);
  --ink-3: var(--panel-ink);
  padding: var(--space-4) var(--space-6);
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation);
}
.panel > :last-child {
  margin-bottom: 0;
}
.panel + .panel {
  margin-top: var(--space-4);
}
.panel-title {
  display: block;
  margin: 0;
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
.panel-description {
  display: block;
  margin: 0;
  font-size: var(--text-small);
  line-height: 1.45;
  color: var(--ink-3);
}

/* Rows inside a panel: a list, or a wrapper around a table. Put .panel-rows on the panel. */
.panel-rows {
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}
.panel-rows > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  padding: var(--space-4) var(--space-6);
}
.panel-rows > li > :first-child {
  flex: 1 1 16rem;
  min-width: 0;
}
.panel-rows > li + li {
  border-top: 1px solid var(--panel-divider);
}
.panel-rows table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
}
.panel-rows th,
.panel-rows td {
  padding: var(--space-4) var(--space-6);
  border: 0;
  text-align: start;
  vertical-align: middle;
  font-weight: inherit;
}
.panel-rows tr + tr > * {
  border-top: 1px solid var(--panel-divider);
}
.panel-rows td:last-child {
  text-align: end;
}

/* Status states: the text names the state; the dot only repeats it in color. */
.status[data-state="ok"] {
  --status-color: var(--solarized-green);
  --status-tint: var(--tint-green);
}
.status[data-state="warn"] {
  --status-color: var(--solarized-yellow);
  --status-tint: var(--tint-yellow);
}
.status[data-state="down"] {
  --status-color: var(--solarized-red);
  --status-tint: var(--tint-red);
}
.status[data-state="info"] {
  --status-color: var(--solarized-blue);
  --status-tint: var(--tint-blue);
}
.status[data-state]::before {
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  vertical-align: 0.08em;
  background: var(--status-color);
}
.status--pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px var(--space-3);
  border-radius: 999px;
  white-space: nowrap;
  color: var(--card-ink);
  background: var(--status-tint, var(--rail));
}
.status--pill::before {
  margin-right: 0;
}

/* Callouts: an icon badge beside a headline and a sentence. Combine with .panel for an edge. */
.callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  --callout-color: var(--solarized-blue);
  --callout-tint: var(--tint-blue);
}
.callout[data-state="ok"] {
  --callout-color: var(--solarized-green);
  --callout-tint: var(--tint-green);
}
.callout[data-state="warn"] {
  --callout-color: var(--solarized-yellow);
  --callout-tint: var(--tint-yellow);
}
.callout[data-state="down"] {
  --callout-color: var(--solarized-red);
  --callout-tint: var(--tint-red);
}
.callout-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: 2px;
  border-radius: 50%;
  font-family: var(--mono);
  font-weight: 600;
  line-height: 1;
  color: var(--callout-color);
  background: var(--callout-tint);
}
.callout-title {
  margin: 0 0 var(--space-1);
  font-family: var(--sans);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
}
.callout p {
  margin: 0;
}

/* Tinted callouts: the whole panel takes the state's tint, with a colored leading edge like a
   marked row's. The icon sits on the plain panel inside a ring of the state color. */
.callout--tinted {
  --ink: var(--card-ink);
  --ink-2: var(--card-ink);
  --ink-3: var(--card-ink);
  color: var(--card-ink);
  background: var(--callout-tint);
  box-shadow:
    inset 4px 0 0 var(--callout-color),
    var(--elevation);
}
.callout--tinted:dir(rtl) {
  box-shadow:
    inset -4px 0 0 var(--callout-color),
    var(--elevation);
}
.callout--tinted .callout-icon {
  background: var(--panel);
  box-shadow: inset 0 0 0 2px var(--callout-color);
}

/* Marked rows: a panel row with data-state or data-accent takes that color's tint and a leading
   edge. Text switches to card ink, which keeps 4.5:1 on every tint. A pill inside sits on the
   plain panel with a ring, so it stays visible on the tint. The outer rows round their leading
   corners to the panel's inner radius, so an edge curves at the panel's corners as a callout's
   does. */
.panel-rows > li:first-child,
.panel-rows table > :not(.visually-hidden):first-child > tr:first-child > :first-child,
.panel-rows table > .visually-hidden:first-child + * > tr:first-child > :first-child {
  border-start-start-radius: calc(var(--radius-lg) - 1px);
}
.panel-rows > li:last-child,
.panel-rows table > :last-child > tr:last-child > :first-child {
  border-end-start-radius: calc(var(--radius-lg) - 1px);
}
.panel-rows > li[data-state="ok"],
.panel-rows tr[data-state="ok"] {
  --row-color: var(--solarized-green);
  --row-tint: var(--tint-green);
}
.panel-rows > li[data-state="warn"],
.panel-rows tr[data-state="warn"] {
  --row-color: var(--solarized-yellow);
  --row-tint: var(--tint-yellow);
}
.panel-rows > li[data-state="down"],
.panel-rows tr[data-state="down"] {
  --row-color: var(--solarized-red);
  --row-tint: var(--tint-red);
}
.panel-rows > li[data-state="info"],
.panel-rows tr[data-state="info"] {
  --row-color: var(--solarized-blue);
  --row-tint: var(--tint-blue);
}
.panel-rows > li[data-accent],
.panel-rows tr[data-accent] {
  --row-color: var(--section-accent);
  --row-tint: var(--section-tint);
}
.panel-rows > li:is([data-state], [data-accent]),
.panel-rows tr:is([data-state], [data-accent]) {
  --ink: var(--card-ink);
  --ink-2: var(--card-ink);
  --ink-3: var(--card-ink);
  color: var(--card-ink);
}
.panel-rows > li:is([data-state], [data-accent]),
.panel-rows tr:is([data-state], [data-accent]) > * {
  background: var(--row-tint);
}
.panel-rows > li:is([data-state], [data-accent]),
.panel-rows tr:is([data-state], [data-accent]) > :first-child {
  box-shadow: inset 4px 0 0 var(--row-color);
}
/* Box shadows have no logical offsets, so the edge moves to the right in right-to-left text. */
.panel-rows > li:is([data-state], [data-accent]):dir(rtl),
.panel-rows tr:is([data-state], [data-accent]):dir(rtl) > :first-child {
  box-shadow: inset -4px 0 0 var(--row-color);
}
/* Between two tinted rows, the divider is a gap of plain panel. */
.panel-rows > li:is([data-state], [data-accent]) + li:is([data-state], [data-accent]),
.panel-rows tr:is([data-state], [data-accent]) + tr:is([data-state], [data-accent]) > * {
  border-top-color: var(--panel);
}
.panel-rows :is(li, tr):is([data-state], [data-accent]) .status--pill {
  background: var(--panel);
  box-shadow: inset 0 0 0 2px var(--status-color, var(--row-color));
}

/* Tables that become labelled rows on narrow screens. Stacking changes how some browsers expose
   the table, so give stacked tables explicit roles (see the README). */
@media (max-width: 560px) {
  .table--stack,
  .table--stack tbody,
  .table--stack tr,
  .table--stack th,
  .table--stack td {
    display: block;
  }
  .table--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .table--stack tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-4);
    padding: var(--space-4);
  }
  .table--stack tr + tr {
    border-top: 1px solid var(--panel-divider);
  }
  .table--stack tr > * {
    padding: 0;
    text-align: start;
  }
  .table--stack td {
    font-size: var(--text-small);
  }
  .panel-rows .table--stack tr + tr > *,
  .panel-rows .table--stack td:last-child {
    border-top: 0;
    text-align: start;
  }
  .table--stack th {
    flex: 1 1 100%;
  }
  .panel-rows .table--stack > thead:first-child + * > tr:first-child,
  .panel-rows .table--stack > :not(thead):first-child > tr:first-child {
    border-start-start-radius: calc(var(--radius-lg) - 1px);
  }
  .panel-rows .table--stack > :last-child > tr:last-child {
    border-end-start-radius: calc(var(--radius-lg) - 1px);
  }
  .panel-rows .table--stack tr:is([data-state], [data-accent]) {
    background: var(--row-tint);
    box-shadow: inset 4px 0 0 var(--row-color);
  }
  .panel-rows .table--stack tr:is([data-state], [data-accent]):dir(rtl) {
    box-shadow: inset -4px 0 0 var(--row-color);
  }
  .panel-rows .table--stack tr:is([data-state], [data-accent]) > * {
    background: none;
    box-shadow: none;
  }
  .panel-rows
    .table--stack
    tr:is([data-state], [data-accent])
    + tr:is([data-state], [data-accent]) {
    border-top-color: var(--panel);
  }
  .table--stack td[data-label]:not([data-label=""])::before {
    content: attr(data-label) " ";
    color: var(--ink-3);
  }
  .panel-rows > li {
    padding: var(--space-4);
  }
  .panel {
    padding: var(--space-4);
  }
  .panel.panel-rows {
    padding: 0;
  }
}

@media print {
  .panel {
    box-shadow: none;
    border-color: #93a1a1;
    background: none;
  }
  .status--pill,
  .panel-rows :is(li, tr):is([data-state], [data-accent]) .status--pill {
    background: none;
    box-shadow: none;
    border: 1px solid #93a1a1;
  }
  .callout--tinted,
  .panel-rows > li:is([data-state], [data-accent]),
  .panel-rows tr:is([data-state], [data-accent]) > * {
    background: none;
    box-shadow: none;
  }
}
@media (forced-colors: active) {
  .panel {
    border-color: CanvasText;
  }
  .panel-rows > li + li,
  .panel-rows tr + tr > *,
  .table--stack tr + tr {
    border-color: CanvasText;
  }
  .status[data-state]::before,
  .callout-icon {
    forced-color-adjust: none;
    background: CanvasText;
    color: Canvas;
  }
  .status--pill {
    border: 1px solid CanvasText;
  }
  .callout--tinted,
  .panel-rows > li:is([data-state], [data-accent]),
  .panel-rows tr:is([data-state], [data-accent]) > :first-child,
  .panel-rows .table--stack tr:is([data-state], [data-accent]) {
    border-inline-start: 4px solid CanvasText;
  }
}

/* Long-form writing, such as Markdown rendered by a static site generator, within the reading measure. */
.prose {
  max-width: var(--measure);
}
.prose > :first-child {
  margin-top: 0;
}
.prose h2,
.prose h3,
.prose h4 {
  color: var(--ink);
  font-weight: 600;
}
.prose h2 {
  margin: var(--space-8) 0 var(--space-3);
  font-size: var(--text-section);
}
.prose h3 {
  margin: var(--space-6) 0 var(--space-2);
  font-size: 1.1875rem;
}
.prose h4 {
  margin: var(--space-6) 0 var(--space-2);
  font-size: var(--text-body);
}
.prose ul,
.prose ol {
  margin: 0 0 var(--space-4);
  padding-left: 1.5em;
}
.prose li {
  margin-bottom: var(--space-1);
}
.prose li > ul,
.prose li > ol {
  margin: var(--space-1) 0 0;
}
.prose blockquote {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-4);
  border-left: 3px solid var(--section-accent, var(--accent));
  color: var(--ink-2);
}
.prose blockquote > :last-child,
.prose li > :last-child {
  margin-bottom: 0;
}
/* Code wraps rather than scrolling, so no block needs its own keyboard-focusable scroll region. */
.prose pre {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  color: var(--rail-ink);
  background: var(--rail);
  font-family: var(--mono);
  font-size: var(--text-small);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.prose pre code {
  padding: 0;
  color: inherit;
  background: none;
  font-size: inherit;
}
.prose table {
  width: 100%;
  margin: 0 0 var(--space-4);
  border-collapse: collapse;
  font-size: var(--text-small);
}
.prose caption {
  margin-bottom: var(--space-2);
  text-align: left;
}
.prose th,
.prose td {
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
.prose th {
  font-weight: 600;
}
.prose img {
  max-width: 100%;
  height: auto;
}
.prose figure {
  margin: 0 0 var(--space-4);
}
.prose figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-small);
  color: var(--ink-3);
}
.prose hr {
  margin: var(--space-8) 0;
  border: 0;
  border-top: 1px solid var(--rule);
}
.prose .footnotes {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
  font-size: var(--text-small);
}
/* Prism token classes (Astro's `prism` highlighter, among others). No Solarized accent reaches 4.5:1
   on the light code surface, so highlighting uses weight and style and never changes the text colour. */
.token:is(.comment, .prolog, .doctype, .cdata) {
  font-style: italic;
}
.token:is(.keyword, .atrule, .important, .tag, .selector, .builtin) {
  font-weight: 600;
}
.token.deleted {
  text-decoration: line-through;
}
.token.inserted {
  text-decoration: underline;
}
@media print {
  .prose pre {
    border: 1px solid #bbb;
  }
  .prose blockquote,
  .prose th,
  .prose td,
  .prose hr,
  .prose .footnotes {
    border-color: #bbb;
  }
}
@media (forced-colors: active) {
  .prose pre {
    outline: 1px solid CanvasText;
  }
  .prose blockquote {
    border-left-color: CanvasText;
  }
}