@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;
}
/* Groups join with a divider too: below a visible head, between bodies with rows, and above a foot
   (which renders last). Only the panel's own table takes these. */
.panel-rows tr + tr > *,
.panel-rows > :where(table) > :where(tbody:has(> tr) ~ tbody) > tr:first-child > *,
.panel-rows > :where(table:has(> tbody > tr)) > :where(tfoot) > tr:first-child > *,
.panel-rows
  > :where(table)
  > :where(thead:not(.visually-hidden) ~ tbody:has(> tr):not(tbody:has(> tr) ~ *))
  > tr:first-child
  > * {
  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. */
.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, also where a body meets the next
   group. An empty body between two groups hides that meeting, as does an empty last body when the
   foot comes first in the source, so those keep the plain divider. */
.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]) > *,
.panel-rows
  > table
  > :where(tbody:has(> tr:last-child:is([data-state], [data-accent])) + :is(tbody, tfoot))
  > tr:first-child:is([data-state], [data-accent])
  > *,
.panel-rows
  > table:where(:has(> tbody:last-of-type > tr:last-child:is([data-state], [data-accent])))
  > tfoot
  > tr:first-child: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));
}

/* The outer rows round their leading corners to the panel's inner radius (its radius minus its
   1px border), so an edge curves at the panel's corners as a callout's does. */
.panel-rows > li:first-child {
  border-start-start-radius: calc(var(--radius-lg) - 1px);
}
.panel-rows > li:last-child {
  border-end-start-radius: calc(var(--radius-lg) - 1px);
}
/* In a table, the first body group with rows is on top unless a visible caption or head sits
   above it; a caption counts as on top even with caption-side: bottom. A foot with rows always
   renders last, wherever it is in the source. */
.panel-rows > table > tfoot > tr:last-child > :first-child {
  border-end-start-radius: calc(var(--radius-lg) - 1px);
}
.panel-rows
  > table:not(:has(> tfoot > tr))
  > tbody:has(> tr):not(:has(~ tbody > tr))
  > tr:last-child
  > :first-child {
  border-end-start-radius: calc(var(--radius-lg) - 1px);
}
.panel-rows
  > table:not(:has(> :is(caption, thead):not(.visually-hidden)))
  > tbody:has(> tr):not(tbody:has(> tr) ~ *)
  > tr:first-child
  > :first-child {
  border-start-start-radius: calc(var(--radius-lg) - 1px);
}

/* 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,
  .table--stack :where(:is(tbody, tfoot):has(> tr) ~ :is(tbody, tfoot)) > tr:first-child {
    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 > :is(th, td) {
    border-top: 0;
    text-align: start;
  }
  .table--stack th {
    flex: 1 1 100%;
  }
  /* Stacked, the head is out of the flow and the groups render in source order. */
  .panel-rows
    > .table--stack:not(:has(> caption:not(.visually-hidden)))
    > :is(tbody, tfoot):has(> tr):not(:is(tbody, tfoot):has(> tr) ~ *)
    > tr:first-child {
    border-start-start-radius: calc(var(--radius-lg) - 1px);
  }
  .panel-rows
    > .table--stack
    > :is(tbody, tfoot):has(> tr):not(:has(~ :is(tbody, tfoot) > tr))
    > 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]),
  .panel-rows
    .table--stack
    :where(
      :is(tbody, tfoot):has(> tr:last-child:is([data-state], [data-accent])) + :is(tbody, tfoot)
    )
    > tr:first-child: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]) > *,
  .panel-rows .table--stack tr:is([data-state], [data-accent]) {
    background: none;
    box-shadow: none;
  }
  /* Borders print where shadows may not, so the edge becomes one. It takes 4px of the content
     box, which only matters on paper. */
  .callout--tinted {
    border-inline-start: 4px solid var(--callout-color);
  }
  .panel-rows > li:is([data-state], [data-accent]),
  .panel-rows tr:is([data-state], [data-accent]) > :first-child {
    border-inline-start: 4px solid var(--row-color);
  }
}
/* Stacked, the row carries the edge, so its first cell drops the one it would get when wide. */
@media print and (max-width: 560px), (forced-colors: active) and (max-width: 560px) {
  .panel-rows .table--stack tr:is([data-state], [data-accent]) {
    border-inline-start: 4px solid var(--row-color);
  }
  .panel-rows .table--stack tr:is([data-state], [data-accent]) > :first-child {
    border-inline-start: 0;
  }
}
@media (forced-colors: active) and (max-width: 560px) {
  .panel-rows .table--stack tr:is([data-state], [data-accent]) {
    border-inline-start-color: CanvasText;
  }
}
@media (forced-colors: active) {
  .panel {
    border-color: CanvasText;
  }
  .panel-rows > li + li,
  .panel-rows tr + tr > *,
  .panel-rows > :where(table) > :where(tbody:has(> tr) ~ tbody) > tr:first-child > *,
  .panel-rows > :where(table:has(> tbody > tr)) > :where(tfoot) > tr:first-child > *,
  .panel-rows
    > :where(table)
    > :where(thead:not(.visually-hidden) ~ tbody:has(> tr):not(tbody:has(> tr) ~ *))
    > tr:first-child
    > *,
  .table--stack tr + tr,
  .table--stack :where(:is(tbody, tfoot):has(> tr) ~ :is(tbody, tfoot)) > tr:first-child {
    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 {
    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;
  }
}