@layer quire, plugin, site;
/* --- scale --- */
@layer quire {
:root {
  --qr-text-root: 16px;
  --qr-col: 21rem;
  --qr-gutter: 1.5rem;
  --qr-measure: 744px;
  --qr-thumb: 4rem;
  --qr-nav-columns: 1fr auto 1fr;
  --qr-nav-links-column: 2;
  --qr-nav-end-column: 3;
  --qr-nav-justify: center;
  --qr-measure-wide: 1104px;
  --qr-bleed: calc(50% - 50cqw);
}
}

/* --- fonts --- */
@layer quire {
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/_quire/fonts/inter-latin-ext.woff2?h=34b9c504cab7a73e37b746343a449132") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/_quire/fonts/inter-latin.woff2?h=3100e775e8616cd2611beecfa23a4263") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/_quire/fonts/jetbrains-mono-latin-ext.woff2?h=79bfdab9ba467e26eea4122e6f2567e1") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/_quire/fonts/jetbrains-mono-latin.woff2?h=18be452724bfdc236c074ca94a249a7f") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --qr-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --qr-font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}
}

/* --- palette --- */
@layer quire {
:root {
  --qr-neutral-1: #111113;
  --qr-neutral-2: #18191b;
  --qr-neutral-3: #212225;
  --qr-neutral-4: #272a2d;
  --qr-neutral-5: #2e3135;
  --qr-neutral-6: #363a3f;
  --qr-neutral-7: #43484e;
  --qr-neutral-8: #5a6169;
  --qr-neutral-9: #696e77;
  --qr-neutral-10: #777b84;
  --qr-neutral-11: #b0b4ba;
  --qr-neutral-12: #edeef0;
  --qr-neutral-contrast: #fff;
  --qr-accent-1: #11131f;
  --qr-accent-2: #141726;
  --qr-accent-3: #182449;
  --qr-accent-4: #1d2e62;
  --qr-accent-5: #253974;
  --qr-accent-6: #304384;
  --qr-accent-7: #3a4f97;
  --qr-accent-8: #435db1;
  --qr-accent-9: #3e63dd;
  --qr-accent-10: #5472e4;
  --qr-accent-11: #9eb1ff;
  --qr-accent-12: #d6e1ff;
  --qr-accent-contrast: #fff;
  --qr-spot-1: #191114;
  --qr-spot-2: #201318;
  --qr-spot-3: #381525;
  --qr-spot-4: #4d122f;
  --qr-spot-5: #5c1839;
  --qr-spot-6: #6d2545;
  --qr-spot-7: #873356;
  --qr-spot-8: #b0436e;
  --qr-spot-9: #e93d82;
  --qr-spot-10: #ee518a;
  --qr-spot-11: #ff92ad;
  --qr-spot-12: #fdd3e8;
  --qr-spot-contrast: #fff;
  --qr-swatch1-1: #0d1520;
  --qr-swatch1-2: #111927;
  --qr-swatch1-3: #0d2847;
  --qr-swatch1-4: #003362;
  --qr-swatch1-5: #004074;
  --qr-swatch1-6: #104d87;
  --qr-swatch1-7: #205d9e;
  --qr-swatch1-8: #2870bd;
  --qr-swatch1-9: #0090ff;
  --qr-swatch1-10: #3b9eff;
  --qr-swatch1-11: #70b8ff;
  --qr-swatch1-12: #c2e6ff;
  --qr-swatch1-contrast: #fff;
  --qr-swatch2-1: #14121f;
  --qr-swatch2-2: #1b1525;
  --qr-swatch2-3: #291f43;
  --qr-swatch2-4: #33255b;
  --qr-swatch2-5: #3c2e69;
  --qr-swatch2-6: #473876;
  --qr-swatch2-7: #56468b;
  --qr-swatch2-8: #6958ad;
  --qr-swatch2-9: #6e56cf;
  --qr-swatch2-10: #7d66d9;
  --qr-swatch2-11: #baa7ff;
  --qr-swatch2-12: #e2ddfe;
  --qr-swatch2-contrast: #fff;
  --qr-swatch3-1: #0b161a;
  --qr-swatch3-2: #101b20;
  --qr-swatch3-3: #082c36;
  --qr-swatch3-4: #003848;
  --qr-swatch3-5: #004558;
  --qr-swatch3-6: #045468;
  --qr-swatch3-7: #12677e;
  --qr-swatch3-8: #11809c;
  --qr-swatch3-9: #00a2c7;
  --qr-swatch3-10: #23afd0;
  --qr-swatch3-11: #4ccce6;
  --qr-swatch3-12: #b6ecf7;
  --qr-swatch3-contrast: #fff;
  --qr-swatch4-1: #16120c;
  --qr-swatch4-2: #1d180f;
  --qr-swatch4-3: #302008;
  --qr-swatch4-4: #3f2700;
  --qr-swatch4-5: #4d3000;
  --qr-swatch4-6: #5c3d05;
  --qr-swatch4-7: #714f19;
  --qr-swatch4-8: #8f6424;
  --qr-swatch4-9: #ffc53d;
  --qr-swatch4-10: #ffd60a;
  --qr-swatch4-11: #ffca16;
  --qr-swatch4-12: #ffe7b3;
  --qr-swatch4-contrast: #16120c;
  --qr-red-1: #191111;
  --qr-red-2: #201314;
  --qr-red-3: #3b1219;
  --qr-red-4: #500f1c;
  --qr-red-5: #611623;
  --qr-red-6: #72232d;
  --qr-red-7: #8c333a;
  --qr-red-8: #b54548;
  --qr-red-9: #e5484d;
  --qr-red-10: #ec5d5e;
  --qr-red-11: #ff9592;
  --qr-red-12: #ffd1d9;
  --qr-red-contrast: #fff;
  --qr-green-1: #0e1511;
  --qr-green-2: #141a15;
  --qr-green-3: #1b2a1e;
  --qr-green-4: #1d3a24;
  --qr-green-5: #25482d;
  --qr-green-6: #2d5736;
  --qr-green-7: #366740;
  --qr-green-8: #3e7949;
  --qr-green-9: #46a758;
  --qr-green-10: #53b365;
  --qr-green-11: #71d083;
  --qr-green-12: #c2f0c2;
  --qr-green-contrast: #fff;
  --qr-amber-1: #16120c;
  --qr-amber-2: #1d180f;
  --qr-amber-3: #302008;
  --qr-amber-4: #3f2700;
  --qr-amber-5: #4d3000;
  --qr-amber-6: #5c3d05;
  --qr-amber-7: #714f19;
  --qr-amber-8: #8f6424;
  --qr-amber-9: #ffc53d;
  --qr-amber-10: #ffd60a;
  --qr-amber-11: #ffca16;
  --qr-amber-12: #ffe7b3;
  --qr-amber-contrast: #16120c;
  color-scheme: dark;
}

[data-theme="light"] {
  --qr-neutral-1: #fcfcfd;
  --qr-neutral-2: #f9f9fb;
  --qr-neutral-3: #f0f0f3;
  --qr-neutral-4: #e8e8ec;
  --qr-neutral-5: #e0e1e6;
  --qr-neutral-6: #d9d9e0;
  --qr-neutral-7: #cdced6;
  --qr-neutral-8: #b9bbc6;
  --qr-neutral-9: #8b8d98;
  --qr-neutral-10: #80838d;
  --qr-neutral-11: #60646c;
  --qr-neutral-12: #1c2024;
  --qr-accent-1: #fdfdfe;
  --qr-accent-2: #f7f9ff;
  --qr-accent-3: #edf2fe;
  --qr-accent-4: #e1e9ff;
  --qr-accent-5: #d2deff;
  --qr-accent-6: #c1d0ff;
  --qr-accent-7: #abbdf9;
  --qr-accent-8: #8da4ef;
  --qr-accent-9: #3e63dd;
  --qr-accent-10: #3358d4;
  --qr-accent-11: #3a5bc7;
  --qr-accent-12: #1f2d5c;
  --qr-spot-1: #fffcfd;
  --qr-spot-2: #fef7f9;
  --qr-spot-3: #ffe9f0;
  --qr-spot-4: #fedce7;
  --qr-spot-5: #facedd;
  --qr-spot-6: #f3bed1;
  --qr-spot-7: #eaacc3;
  --qr-spot-8: #e093b2;
  --qr-spot-9: #e93d82;
  --qr-spot-10: #df3478;
  --qr-spot-11: #cb1d63;
  --qr-spot-12: #621639;
  --qr-swatch1-1: #fbfdff;
  --qr-swatch1-2: #f4faff;
  --qr-swatch1-3: #e6f4fe;
  --qr-swatch1-4: #d5efff;
  --qr-swatch1-5: #c2e5ff;
  --qr-swatch1-6: #acd8fc;
  --qr-swatch1-7: #8ec8f6;
  --qr-swatch1-8: #5eb1ef;
  --qr-swatch1-9: #0090ff;
  --qr-swatch1-10: #0588f0;
  --qr-swatch1-11: #0d74ce;
  --qr-swatch1-12: #113264;
  --qr-swatch2-1: #fdfcfe;
  --qr-swatch2-2: #faf8ff;
  --qr-swatch2-3: #f4f0fe;
  --qr-swatch2-4: #ebe4ff;
  --qr-swatch2-5: #e1d9ff;
  --qr-swatch2-6: #d4cafe;
  --qr-swatch2-7: #c2b5f5;
  --qr-swatch2-8: #aa99ec;
  --qr-swatch2-9: #6e56cf;
  --qr-swatch2-10: #654dc4;
  --qr-swatch2-11: #6550b9;
  --qr-swatch2-12: #2f265f;
  --qr-swatch3-1: #fafdfe;
  --qr-swatch3-2: #f2fafb;
  --qr-swatch3-3: #def7f9;
  --qr-swatch3-4: #caf1f6;
  --qr-swatch3-5: #b5e9f0;
  --qr-swatch3-6: #9ddde7;
  --qr-swatch3-7: #7dcedc;
  --qr-swatch3-8: #3db9cf;
  --qr-swatch3-9: #00a2c7;
  --qr-swatch3-10: #0797b9;
  --qr-swatch3-11: #107d98;
  --qr-swatch3-12: #0d3c48;
  --qr-swatch4-1: #fefdfb;
  --qr-swatch4-2: #fefbe9;
  --qr-swatch4-3: #fff7c2;
  --qr-swatch4-4: #ffee9c;
  --qr-swatch4-5: #fbe577;
  --qr-swatch4-6: #f3d673;
  --qr-swatch4-7: #e9c162;
  --qr-swatch4-8: #e2a336;
  --qr-swatch4-9: #ffc53d;
  --qr-swatch4-10: #ffba18;
  --qr-swatch4-11: #ab6400;
  --qr-swatch4-12: #4f3422;
  --qr-red-1: #fffcfc;
  --qr-red-2: #fff7f7;
  --qr-red-3: #feebec;
  --qr-red-4: #ffdbdc;
  --qr-red-5: #ffcdce;
  --qr-red-6: #fdbdbe;
  --qr-red-7: #f4a9aa;
  --qr-red-8: #eb8e90;
  --qr-red-9: #e5484d;
  --qr-red-10: #dc3e42;
  --qr-red-11: #ce2c31;
  --qr-red-12: #641723;
  --qr-green-1: #fbfefb;
  --qr-green-2: #f5fbf5;
  --qr-green-3: #e9f6e9;
  --qr-green-4: #daf1db;
  --qr-green-5: #c9e8ca;
  --qr-green-6: #b2ddb5;
  --qr-green-7: #94ce9a;
  --qr-green-8: #65ba74;
  --qr-green-9: #46a758;
  --qr-green-10: #3e9b4f;
  --qr-green-11: #2a7e3b;
  --qr-green-12: #203c25;
  --qr-amber-1: #fefdfb;
  --qr-amber-2: #fefbe9;
  --qr-amber-3: #fff7c2;
  --qr-amber-4: #ffee9c;
  --qr-amber-5: #fbe577;
  --qr-amber-6: #f3d673;
  --qr-amber-7: #e9c162;
  --qr-amber-8: #e2a336;
  --qr-amber-9: #ffc53d;
  --qr-amber-10: #ffba18;
  --qr-amber-11: #ab6400;
  --qr-amber-12: #4f3422;
  color-scheme: light;
}
}

/* --- base.css --- */
@layer quire {
/* Element defaults: the reset the rest of the sheet assumes. */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --qr-col, --qr-measure, --qr-measure-wide, --qr-measure-full, --qr-gutter,
   --qr-thumb and the nav columns come from Scale, emitted around this sheet. */

:root {
  --qr-bg: var(--qr-neutral-1);
  --qr-text-xl: 2.5rem;
  --qr-text-lg: 1.75rem;
  --qr-text-md: 1.125rem;
  --qr-text-sm: 0.9375rem;
  --qr-text-xs: 0.75rem;

  --qr-weight-medium: 500;
  --qr-weight-semibold: 600;
  --qr-weight-bold: 700;

  --qr-lead-tight: 1.2;
  --qr-lead-body: 1.6;

  --qr-track-display: -0.02em;
  --qr-track-label: 0.08em;

  --qr-space-1: 0.25rem;
  --qr-space-2: 0.5rem;
  --qr-space-3: 0.75rem;
  --qr-space-4: 1rem;
  --qr-space-5: 1.5rem;
  --qr-space-6: 2rem;
  --qr-space-7: 3rem;
  --qr-space-8: 4rem;

  /* The comfortable line. A property of the font, not the grid — change the
     prose face and the right number moves while the column does not. */
  --qr-measure-text: 65ch;

  --qr-radius: 0.5rem;
  --qr-radius-s: 0.25rem;
  --qr-motion: 0.2s;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --qr-motion: 0s;
  }
}

html {
  font-size: var(--qr-text-root);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--qr-bg);
}

body {
  background: var(--qr-bg);
  color: var(--qr-neutral-12);
  font-family: var(--qr-font);
  font-size: var(--qr-text-sm);
  line-height: var(--qr-lead-body);
  /* Sticky footer: main takes the slack so the footer sits at the bottom
     even on a short page. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

pre,
code {
  tab-size: 2;
  font-variant-ligatures: none;
}

/* The container a bleeding figure measures itself against. 100vw would count
   the scrollbar and put the figure a few pixels past the page, which is a
   horizontal scrollbar on every desktop; cqw is the content box. */

main {
  flex: 1;
  container-type: inline-size;
}

a {
  color: var(--qr-accent-11);
  text-decoration: none;
}

a:hover {
  color: var(--qr-accent-12);
}

:focus-visible {
  outline: 2px solid var(--qr-accent-8);
  outline-offset: 2px;
}

/* Default toggle. Hosts restyle .theme-toggle and/or pass children to
 * ThemeToggle (any non-span child hides these labels). Visibility of
 * .theme-toggle-dark / .theme-toggle-light follows data-theme. */
}

/* --- toggle.css --- */
@layer quire {
/* The light/dark control rendered by quire.ThemeToggle. */

.theme-toggle {
  display: inline-flex;
  width: var(--qr-space-6);
  height: var(--qr-space-6);
  align-items: center;
  justify-content: center;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  color: var(--qr-neutral-11);
  background: transparent;
  border: none;
  border-radius: var(--qr-radius-s);
  padding: 0;
}

.theme-toggle:hover {
  color: var(--qr-neutral-12);
  background: var(--qr-neutral-2);
}

.theme-toggle-light {
  display: none;
}

[data-theme="light"] .theme-toggle-dark {
  display: none;
}

[data-theme="light"] .theme-toggle-light {
  display: initial;
}

}

/* --- nav.css --- */
@layer quire {
/* The site header and primary navigation rendered by engine.Nav.
   Structure only: colour comes from the selected palette. */

html {
  scroll-padding-top: calc(var(--qr-space-8) * 2);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--qr-bg);
}

/* Three columns with matched outer tracks, so the links stay centred on the
   page however much sits in nav-end. */
.site-nav {
  display: grid;
  grid-template-columns: var(--qr-nav-columns);
  align-items: center;
  border-bottom: 1px solid var(--qr-neutral-6);
  background: var(--qr-bg);
  padding: var(--qr-space-4) 0;
  margin-bottom: var(--qr-space-4);
}

.nav-links {
  grid-column: var(--qr-nav-links-column);
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: var(--qr-nav-justify);
  gap: var(--qr-space-5);
  overflow-x: auto;
  padding: var(--qr-space-2) var(--qr-space-5);
  scrollbar-width: none;
}

.nav-links::-webkit-scrollbar {
  display: none;
}

.nav-link {
  position: relative;
  color: var(--qr-neutral-11);
  font-size: var(--qr-text-xs);
  font-weight: var(--qr-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--qr-track-label);
  white-space: nowrap;
  padding-bottom: var(--qr-space-1);
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--qr-accent-9);
  transform: scaleX(0);
  transition: transform var(--qr-motion) ease;
}

.nav-link:hover {
  color: var(--qr-accent-11);
  transition: color var(--qr-motion) ease;
}

.nav-link:hover::after {
  transform: scaleX(0.5);
}

.nav-link--active {
  color: var(--qr-accent-11);
}

.nav-link--active::after,
.nav-link--active:hover::after {
  transform: scaleX(1);
}

.nav-end {
  grid-column: var(--qr-nav-end-column);
  justify-self: end;
  display: flex;
  align-items: center;
  padding: 0 var(--qr-space-3);
  position: relative;
}

.nav-end::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--qr-gutter));
  top: 0;
  bottom: 0;
  width: var(--qr-gutter);
  background: linear-gradient(to right, transparent, var(--qr-bg));
  pointer-events: none;
}
}

/* --- layout.css --- */
@layer quire {
/* Default look. Structure and spacing; colour from the selected palette.
   Type and space: --qr-text-* --qr-space-* --qr-weight-* --qr-lead-* --qr-track-* on :root. */

.page {
  max-width: var(--qr-measure);
  margin: 0 auto;
  padding: var(--qr-space-6) var(--qr-gutter);
  display: flex;
  flex-direction: column;
  gap: var(--qr-space-7);
}

/* Scale emits --qr-measure-wide and --qr-measure-full only as far as the site
   said its layouts reach, so a wider class it never declared stays a .page. */

.page--wide {
  max-width: var(--qr-measure-wide, var(--qr-measure));
}

.page--full {
  max-width: var(--qr-measure-full, var(--qr-measure));
}

.section-blurb {
  color: var(--qr-neutral-11);
}

/* SlotColumn's sizes describes this grid: one track is the column at every
   designed page width. min() so a single track still fits a phone. */

.home-sections,
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--qr-col), 100%), 1fr));
  gap: var(--qr-gutter);
}

.home-section {
  padding: var(--qr-space-5);
  border: 1px solid var(--qr-neutral-6);
  border-radius: var(--qr-radius);
  background: var(--qr-neutral-3);
  font-weight: var(--qr-weight-semibold);
}

.home-section:hover {
  border-color: var(--qr-accent-8);
  color: var(--qr-accent-11);
  transition: border-color var(--qr-motion) ease, color var(--qr-motion) ease;
}

.page-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--qr-space-4);
}

.page-head:has(.page-meta) {
  padding-bottom: var(--qr-space-6);
  border-bottom: 1px solid var(--qr-neutral-6);
}

.page h1 {
  font-size: var(--qr-text-xl);
  font-weight: var(--qr-weight-bold);
  letter-spacing: var(--qr-track-display);
  line-height: var(--qr-lead-tight);
}

.page h1 a {
  color: inherit;
}

.page h1 a:hover {
  color: var(--qr-neutral-11);
}

.page h2,
.page h3,
.section-header h2 {
  font-size: var(--qr-text-md);
  font-weight: var(--qr-weight-semibold);
  line-height: var(--qr-lead-tight);
}

.page-stats {
  color: var(--qr-neutral-10);
}

.header-badges:empty {
  display: none;
}

.page-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--qr-space-3);
  color: var(--qr-neutral-11);
}

.meta-separator {
  opacity: 0.5;
}

.page-intro,
.home-lede {
  max-width: 60ch;
  font-size: var(--qr-text-md);
  line-height: var(--qr-lead-body);
  color: var(--qr-neutral-11);
}

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--qr-space-2);
  margin-bottom: var(--qr-space-4);
}

.card-kicker,
.entry-kicker,
.featured-badge,
.status-badge,
.toc-title {
  font-size: var(--qr-text-xs);
  font-weight: var(--qr-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--qr-track-label);
}

.card-kicker,
.entry-kicker,
.featured-badge {
  color: var(--qr-accent-11);
}

.entries-list {
  border-top: 1px solid var(--qr-neutral-6);
}

.entry-item {
  display: flex;
  gap: var(--qr-space-5);
  align-items: flex-start;
  padding: var(--qr-space-5) 0;
  border-bottom: 1px solid var(--qr-neutral-6);
  color: inherit;
}

.entry-item:last-child {
  border-bottom: none;
}

.entry-item:hover {
  color: inherit;
}

.entry-item:hover .entry-title {
  color: var(--qr-accent-11);
  transition: color var(--qr-motion) ease;
}

.entry-kicker {
  display: block;
  opacity: 0.85;
}

.entry-kicker--draft {
  color: var(--qr-spot-11);
  opacity: 1;
}

.entry-context {
  color: var(--qr-neutral-11);
}

.site-footer {
  border-top: 1px solid var(--qr-neutral-6);
  padding: var(--qr-space-6) var(--qr-space-5);
  margin-top: auto;
}

.footer-inner {
  max-width: var(--qr-measure);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--qr-space-4);
  font-size: var(--qr-text-xs);
  color: var(--qr-neutral-10);
}

.footer-inner a {
  color: var(--qr-neutral-10);
}

.footer-inner a:hover {
  color: var(--qr-neutral-12);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--qr-space-4);
}

.btn-primary {
  display: inline-block;
  padding: var(--qr-space-3) var(--qr-space-5);
  background: transparent;
  color: var(--qr-accent-11);
  font-weight: var(--qr-weight-semibold);
  border: 1px solid var(--qr-accent-8);
  border-radius: var(--qr-radius-s);
}

.btn-primary:hover {
  background: var(--qr-accent-9);
  color: var(--qr-accent-contrast);
  border-color: var(--qr-accent-9);
  transition: background var(--qr-motion) ease, color var(--qr-motion) ease, border-color var(--qr-motion) ease;
}

.btn-secondary {
  display: inline-block;
  padding: var(--qr-space-3) var(--qr-space-5);
  background: transparent;
  color: var(--qr-neutral-12);
  font-weight: var(--qr-weight-medium);
  border: 1px solid var(--qr-neutral-6);
  border-radius: var(--qr-radius-s);
}

.btn-secondary:hover {
  color: var(--qr-neutral-12);
  border-color: var(--qr-neutral-11);
  transition: border-color var(--qr-motion) ease;
}

.status-badge {
  display: inline-flex;
  padding: var(--qr-space-1) var(--qr-space-3);
  border-radius: var(--qr-radius-s);
  color: var(--qr-neutral-11);
  background: color-mix(in srgb, currentColor 16%, transparent);
}

.status-badge--draft {
  background: var(--qr-spot-9);
  color: var(--qr-spot-contrast);
  font-weight: var(--qr-weight-bold);
  padding: var(--qr-space-1) var(--qr-space-3);
}

.tags-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--qr-space-2);
  padding: 0;
  margin-bottom: var(--qr-space-4);
}

.prose .tags-list,
.page-head .tags-list {
  margin: var(--qr-space-4) 0 0;
}

.prose .tags-list {
  margin: var(--qr-space-4) 0 var(--qr-space-6);
}

.tag {
  font-size: var(--qr-text-xs);
  font-weight: var(--qr-weight-semibold);
  letter-spacing: var(--qr-track-label);
  padding: var(--qr-space-1) var(--qr-space-3);
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  border-radius: var(--qr-radius-s);
  color: var(--qr-neutral-11);
  background: color-mix(in srgb, currentColor 16%, transparent);
}

li.tag {
  margin-bottom: 0;
}

.tag-more {
  font-size: var(--qr-text-xs);
  padding: var(--qr-space-1) var(--qr-space-2);
  color: var(--qr-neutral-10);
}

.forward-link {
  display: inline-flex;
  align-items: center;
  gap: var(--qr-space-1);
  font-weight: var(--qr-weight-medium);
}

.forward-link--accent {
  color: var(--qr-accent-11);
}

.forward-link--muted {
  color: var(--qr-neutral-10);
}

.forward-link--muted:hover {
  color: var(--qr-neutral-12);
}

.arrow {
  display: inline-block;
  transition: transform var(--qr-motion) ease;
}

.forward-link:hover .arrow,
.card:hover .arrow {
  transform: translateX(3px);
}

.back-link {
  padding-top: var(--qr-space-6);
  border-top: 1px solid var(--qr-neutral-6);
}

.back-link a {
  color: var(--qr-neutral-10);
  font-weight: var(--qr-weight-medium);
}

.back-link a:hover {
  color: var(--qr-neutral-12);
}

.back-link:hover .arrow {
  transform: translateX(-3px);
}

.card-list {
  display: flex;
  flex-direction: column;
  gap: var(--qr-space-6);
}

/* Images. A frame is sized by the width and height Quire puts on every img,
   so it reserves its space before the bytes arrive and never shifts the page.
   The background is what shows in the meantime. */

.figure,
.card-image,
.entry-thumb {
  margin: 0;
  border: 1px solid var(--qr-neutral-6);
  border-radius: var(--qr-radius);
  background: var(--qr-neutral-2);
  overflow: hidden;
  line-height: 0;
}

.figure img,
.card-image img,
.entry-thumb img {
  display: block;
  width: 100%;
  height: auto;
}

/* Out to the window edge, where a border and a radius have nothing to sit
   against. --qr-bleed is calc(50% - 50cqw) — see main in base.css — so the
   width resolves to one whole content box. Inert until Scale reaches that far. */

.figure--bleed {
  margin-inline: var(--qr-bleed, 0px);
  width: calc(100% - 2 * var(--qr-bleed, 0px));
  border-inline: none;
  border-radius: 0;
}

.figure figcaption {
  line-height: var(--qr-lead-body);
  padding: var(--qr-space-3) var(--qr-space-4);
  color: var(--qr-neutral-11);
  font-size: var(--qr-text-xs);
}

/* Bleeds to the card's edges, so it drops the border it would double up on. */

.card-image {
  margin: calc(-1 * var(--qr-space-5)) calc(-1 * var(--qr-space-5)) 0;
  border: none;
  border-radius: var(--qr-radius) var(--qr-radius) 0 0;
  background: var(--qr-neutral-3);
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--qr-space-2);
  padding: var(--qr-space-5);
  background: var(--qr-neutral-2);
  border: 1px solid var(--qr-neutral-6);
  border-radius: var(--qr-radius);
  color: inherit;
}

.card:hover {
  color: inherit;
  border-color: var(--qr-accent-8);
  background: var(--qr-accent-3);
  transition: border-color var(--qr-motion) ease, background var(--qr-motion) ease;
}

.card-badges {
  display: flex;
  align-items: center;
  gap: var(--qr-space-3);
}

.featured-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--qr-space-1);
}

.featured-badge svg {
  flex-shrink: 0;
}

.card-kicker {
  display: block;
}

/* Date, title and summary stack inside .entry-body so a thumb can sit beside them. */

.entry-body {
  display: flex;
  flex-direction: column;
  gap: var(--qr-space-2);
  min-width: 0;
}

.entry-thumb {
  display: block;
  flex: 0 0 auto;
  width: var(--qr-thumb);
  border-radius: var(--qr-radius-s);
}

.card-title {
  color: var(--qr-neutral-12);
}

.card-description {
  color: var(--qr-neutral-11);
}

.toc {
  background: var(--qr-neutral-2);
  border: 1px solid var(--qr-neutral-6);
  border-radius: var(--qr-radius);
  overflow: hidden;
}

.toc-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--qr-space-4) var(--qr-space-5);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--qr-neutral-12);
  list-style: none;
}

.toc-toggle::-webkit-details-marker {
  display: none;
}

.toc-toggle:hover {
  background: var(--qr-neutral-3);
}

.toc-title {
  color: var(--qr-neutral-11);
}

.toc-count {
  margin-left: auto;
  font-size: var(--qr-text-xs);
  color: var(--qr-neutral-10);
  padding-right: var(--qr-space-2);
}

.toc-icon {
  color: var(--qr-neutral-10);
  transition: transform var(--qr-motion) ease;
  flex-shrink: 0;
}

.toc[open] .toc-icon {
  transform: rotate(180deg);
}

.toc-list {
  list-style: none;
  padding: 0 var(--qr-space-5) var(--qr-space-4);
  margin: 0;
}

.toc-item {
  margin-bottom: var(--qr-space-2);
}

.toc-item:last-child {
  margin-bottom: 0;
}

.toc-item--depth-3 {
  padding-left: var(--qr-space-4);
}

.toc-link {
  color: var(--qr-neutral-11);
  display: block;
}

.toc-link:hover {
  color: var(--qr-neutral-12);
}
}

/* --- prose.css --- */
@layer quire {
/* Long-form typography for rendered markdown. */

/* Text holds a reading measure whatever page it is on; a figure spans the
   whole page inner. Both need to be the grid's business, because a figure
   cannot reach past a max-width its own parent sets. */

.prose {
  display: grid;
  grid-template-columns:
    [full-start] 1fr
    [text-start] min(100%, var(--qr-measure-text)) [text-end]
    1fr [full-end];
  row-gap: var(--qr-space-5);
  font-size: var(--qr-text-md);
  line-height: var(--qr-lead-body);
}

.prose > * {
  grid-column: text;
}

.prose > .figure,
.prose > .diagram {
  grid-column: full;
}

.prose h2,
.prose h3 {
  font-weight: var(--qr-weight-bold);
  line-height: var(--qr-lead-tight);
  color: var(--qr-neutral-12);
  scroll-margin-top: calc(var(--qr-space-8) * 2);
}

.prose h2 {
  font-size: var(--qr-text-lg);
  letter-spacing: var(--qr-track-display);
  text-transform: none;
  margin-top: var(--qr-space-5);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  font-size: var(--qr-text-md);
  margin-top: var(--qr-space-2);
}

.prose p,
.prose ul,
.prose ol {
  color: var(--qr-neutral-11);
}

.prose ul,
.prose ol {
  padding-left: var(--qr-space-5);
}

.prose li {
  margin-bottom: var(--qr-space-2);
}

.prose li:last-child {
  margin-bottom: 0;
}

.prose a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose strong {
  font-weight: var(--qr-weight-semibold);
  color: var(--qr-neutral-12);
}

.prose code {
  font-family: var(--qr-font-mono);
  font-size: 0.9em;
  background: var(--qr-neutral-2);
  padding: 0.125rem var(--qr-space-1);
  border-radius: var(--qr-radius-s);
}

.prose pre {
  background: var(--qr-neutral-2);
  padding: var(--qr-space-4);
  border-radius: var(--qr-radius);
  overflow-x: auto;
}

.prose pre code {
  background: none;
  padding: 0;
}

/* GitHub alert syntax: > [!NOTE], [!TIP], [!IMPORTANT], [!WARNING], [!CAUTION]. */

.callout {
  --callout-solid: var(--qr-accent-9);
  --qr-bg: var(--qr-accent-2);
  --callout-text: var(--qr-accent-11);
  display: flex;
  flex-direction: column;
  gap: var(--qr-space-3);
  padding: var(--qr-space-4) var(--qr-space-5);
  border-left: 3px solid var(--callout-solid);
  border-radius: var(--qr-radius-s);
  background: var(--qr-bg);
}

.callout--tip { --callout-solid: var(--qr-green-9); --qr-bg: var(--qr-green-2); --callout-text: var(--qr-green-11); }
.callout--important { --callout-solid: var(--qr-spot-9); --qr-bg: var(--qr-spot-2); --callout-text: var(--qr-spot-11); }
.callout--warning { --callout-solid: var(--qr-amber-9); --qr-bg: var(--qr-amber-2); --callout-text: var(--qr-amber-11); }
.callout--caution { --callout-solid: var(--qr-red-9); --qr-bg: var(--qr-red-2); --callout-text: var(--qr-red-11); }

.prose .callout-title {
  font-size: var(--qr-text-xs);
  font-weight: var(--qr-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--qr-track-label);
  color: var(--callout-text);
}

/* Mermaid, drawn by a bake and inlined: pele reads its colours and fonts from
   these tokens, so a diagram follows the palette and the theme. */

.diagram {
  margin: 0;
}

.pele {
  --pele-bg: var(--qr-bg);
  --pele-fg: var(--qr-neutral-12);
  --pele-muted: var(--qr-neutral-10);
  --pele-line: var(--qr-neutral-11);
  --pele-surface: var(--qr-accent-3);
  --pele-surface-alt: var(--qr-neutral-2);
  --pele-border: var(--qr-accent-7);
  --pele-accent: var(--qr-accent-9);
  --pele-critical: var(--qr-red-9);
  /* swatch1 is often the accent's own hue, so it comes last */
  --pele-series-1: var(--qr-accent-9);
  --pele-series-2: var(--qr-spot-9);
  --pele-series-3: var(--qr-swatch2-9);
  --pele-series-4: var(--qr-swatch3-9);
  --pele-series-5: var(--qr-swatch4-9);
  --pele-series-6: var(--qr-green-9);
  --pele-series-7: var(--qr-red-9);
  --pele-series-8: var(--qr-swatch1-9);
  --pele-font: var(--qr-font);
  --pele-font-mono: var(--qr-font-mono);
  --pele-radius: var(--qr-radius-s);
}

/* Nodes carry the accent; a group shares their border token, so it is put
   back on neutral to keep the structure quiet. */
.pele-cluster > rect { stroke: var(--qr-neutral-6); }

/* A node marked :::swatch2 (or any role) takes that role's tint; elsewhere
   the class is ignored and the diagram still draws. */

.pele-node.accent { --qr-node-fill: var(--qr-accent-3); --qr-node-line: var(--qr-accent-7); }
.pele-node.spot { --qr-node-fill: var(--qr-spot-3); --qr-node-line: var(--qr-spot-7); }
.pele-node.swatch1 { --qr-node-fill: var(--qr-swatch1-3); --qr-node-line: var(--qr-swatch1-7); }
.pele-node.swatch2 { --qr-node-fill: var(--qr-swatch2-3); --qr-node-line: var(--qr-swatch2-7); }
.pele-node.swatch3 { --qr-node-fill: var(--qr-swatch3-3); --qr-node-line: var(--qr-swatch3-7); }
.pele-node.swatch4 { --qr-node-fill: var(--qr-swatch4-3); --qr-node-line: var(--qr-swatch4-7); }
.pele-node.red { --qr-node-fill: var(--qr-red-3); --qr-node-line: var(--qr-red-7); }
.pele-node.green { --qr-node-fill: var(--qr-green-3); --qr-node-line: var(--qr-green-7); }
.pele-node.amber { --qr-node-fill: var(--qr-amber-3); --qr-node-line: var(--qr-amber-7); }

:is(.pele-node.accent, .pele-node.spot, .pele-node.swatch1, .pele-node.swatch2, .pele-node.swatch3, .pele-node.swatch4, .pele-node.red, .pele-node.green, .pele-node.amber) > :not(text) { stroke: var(--qr-node-line); }
:is(.pele-node.accent, .pele-node.spot, .pele-node.swatch1, .pele-node.swatch2, .pele-node.swatch3, .pele-node.swatch4, .pele-node.red, .pele-node.green, .pele-node.amber) > :not(text, [fill="none"]) { fill: var(--qr-node-fill); }

/* Token colours are in highlight.css; this is the block surface. Hosts override. */
.prose pre.chroma {
  background: var(--qr-neutral-2);
}

.prose img,
.prose svg {
  display: block;
  max-width: 100%;
  height: auto;
}
}

/* --- highlight.css --- */
@layer quire {
/* Syntax highlighting for engine-rendered markdown.
 *
 * The engine sets chroma's WithClasses(true), so it owns these class names and
 * colours them. Each kind of token takes a role at its text step, so code
 * follows the palette and the theme like everything else. Hosts style the
 * block's surface (.prose pre), not the tokens.
 */

.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr, .chroma .kt,
.chroma .ow { color: var(--qr-accent-11); }

.chroma .s, .chroma .s1, .chroma .s2, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .sd,
.chroma .se, .chroma .sh, .chroma .si, .chroma .sr, .chroma .ss, .chroma .sx,
.chroma .dl { color: var(--qr-green-11); }

.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .mo, .chroma .il,
.chroma .l, .chroma .no, .chroma .ni { color: var(--qr-amber-11); }

.chroma .nf, .chroma .fm, .chroma .nd { color: var(--qr-swatch2-11); }

.chroma .nc, .chroma .nn, .chroma .ne, .chroma .nt { color: var(--qr-swatch3-11); }

.chroma .nv, .chroma .vc, .chroma .vg, .chroma .vi, .chroma .vm,
.chroma .na, .chroma .py, .chroma .nl { color: var(--qr-swatch1-11); }

.chroma .o, .chroma .or, .chroma .p,
.chroma .go { color: var(--qr-neutral-11); }

.chroma .c, .chroma .c1, .chroma .ch, .chroma .cm, .chroma .cp, .chroma .cpf, .chroma .cs,
.chroma .gp { color: var(--qr-neutral-10); }
.chroma .c, .chroma .c1, .chroma .ch, .chroma .cm, .chroma .cs { font-style: italic; }

.chroma .gi { color: var(--qr-green-11); }
.chroma .gd, .chroma .gr, .chroma .gt, .chroma .err { color: var(--qr-red-11); }
.chroma .gh, .chroma .gu { color: var(--qr-accent-11); font-weight: bold; }
.chroma .ge { font-style: italic; }
.chroma .gs { font-weight: bold; }
}

/* --- breakpoint --- */
@layer quire {
@media (width < 744px) {
:root {
  --qr-text-xl: 2rem;
  --qr-text-lg: 1.5rem;
  --qr-nav-columns: minmax(0, 1fr) auto;
  --qr-nav-links-column: 1;
  --qr-nav-end-column: 2;
  --qr-nav-justify: flex-start;
}
}
}

/* --- site.css --- */
@layer site {
.tag-1 { color: var(--qr-swatch1-11); }
.tag-2 { color: var(--qr-swatch2-11); }
.tag-3 { color: var(--qr-swatch3-11); }
.tag-4 { color: var(--qr-swatch4-11); }

/* Page transitions are the UA default root crossfade, driven by nav.js.
   Deliberately no rules here. Do not add @view-transition (Chromium flashes
   white - web/README.md) or override animation/duration/blend:
   the shorthand strips plus-lighter, so identical pixels dip mid-fade. */

.prose ul:not([class]) {
  list-style: none;
  padding-left: 0;
}

.prose ul:not([class]) > li {
  padding-left: var(--qr-space-5);
  position: relative;
}

.prose ul:not([class]) > li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--qr-accent-11);
}

.status-badge--ongoing {
  color: var(--qr-swatch2-11);
}

.status-badge--archived {
  color: var(--qr-neutral-10);
}

/* Home */

.hero {
  padding: var(--qr-space-8) 0;
  border-bottom: 1px solid var(--qr-neutral-6);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--qr-space-8);
  align-items: start;
}

.hero-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--qr-space-5);
  padding-right: var(--qr-space-6);
}

.hero-title-emphasis {
  color: var(--qr-neutral-11);
}

.hero-meta {
  color: var(--qr-neutral-11);
}

.case-study-snapshots {
  display: flex;
  flex-direction: column;
  gap: var(--qr-space-4);
}

.case-study-snapshots .card {
  padding: var(--qr-space-5);
}

.case-study-snapshots .card-description {
  margin-bottom: 0;
}

/* Two lanes: one identity, two doors. Performance leads; backends second so it
   does not set the price. */
.lanes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--qr-col)), 1fr));
  gap: var(--qr-space-3) var(--qr-gutter);
  padding-bottom: var(--qr-space-6);
  border-bottom: 1px solid var(--qr-neutral-6);
}

.lane {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
}

.lane-body {
  padding-bottom: var(--qr-space-4);
}

.contact-zone {
  padding-top: var(--qr-space-8);
  /* margin-bottom: var(--qr-space-6); */
  border-top: 1px solid var(--qr-neutral-6);
}

.lane h2,
.contact-zone h2 {
  font-size: var(--qr-text-xs);
  font-weight: var(--qr-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--qr-track-label);
  color: var(--qr-accent-11);
}

.lane-body,
.entry-context,
.strand-body {
  color: var(--qr-neutral-11);
}

.introduction,
.home-cta p,
.timeline-description {
  font-size: var(--qr-text-md);
  line-height: var(--qr-lead-body);
  color: var(--qr-neutral-11);
}

.introduction {
  max-width: 600px;
}

.introduction p + p {
  margin-top: var(--qr-space-4);
}

.introduction p:first-child {
  color: var(--qr-neutral-12);
}

.home-cta {
  padding-top: var(--qr-space-7);
  border-top: 1px solid var(--qr-neutral-6);
}

.home-cta p {
  max-width: 500px;
  margin-bottom: var(--qr-space-5);
}

/* Journey */

.timeline-entry {
  display: grid;
  grid-template-columns: var(--qr-space-6) 1fr;
  gap: var(--qr-space-5);
  position: relative;
}

.timeline-entry:last-child .timeline-line {
  display: none;
}

.timeline-marker {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timeline-dot {
  width: var(--qr-space-4);
  height: var(--qr-space-4);
  border-radius: 50%;
  background: var(--qr-accent-9);
  border: 3px solid var(--qr-bg);
  z-index: 2;
  flex-shrink: 0;
}

.timeline-dot[data-type="learning"] {
  background: var(--qr-swatch2-9);
}

.timeline-dot[data-type="transition"] {
  background: var(--qr-swatch3-9);
}

.timeline-line {
  position: absolute;
  top: var(--qr-space-4);
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--qr-neutral-6);
}

.timeline-content {
  padding-bottom: var(--qr-space-7);
}

.timeline-header {
  display: flex;
  align-items: center;
  gap: var(--qr-space-4);
  margin-bottom: var(--qr-space-2);
}

.timeline-header time {
  color: var(--qr-neutral-11);
}

.timeline-type {
  padding: var(--qr-space-1) var(--qr-space-2);
  border-radius: var(--qr-radius-s);
  background: var(--qr-neutral-2);
  border: 1px solid currentColor;
}

.timeline-type[data-type="learning"] {
  color: var(--qr-swatch2-11);
}

.timeline-type[data-type="transition"] {
  color: var(--qr-swatch3-11);
}

.timeline-title {
  margin-bottom: var(--qr-space-2);
}

.timeline-description {
  margin-bottom: var(--qr-space-4);
}

.timeline-skills-label {
  color: var(--qr-neutral-10);
  margin-bottom: var(--qr-space-2);
}

.timeline-content .prose {
  font-size: var(--qr-text-sm);
  row-gap: var(--qr-space-4);
}

.timeline-content .prose h2 {
  font-size: var(--qr-text-md);
  margin-top: var(--qr-space-3);
}

.timeline-content .prose h2:first-child {
  margin-top: 0;
}

/* Contact */

.contact-kicker,
.timeline-type {
  font-size: var(--qr-text-xs);
  font-weight: var(--qr-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--qr-track-label);
  color: var(--qr-accent-11);
}

.strand-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--qr-space-5);
}

.strand-title {
  margin-bottom: var(--qr-space-1);
}

.contact-zone a {
  color: var(--qr-neutral-11);
}

.contact-zone a:hover {
  color: var(--qr-neutral-12);
}

.footer-inner {
  max-width: var(--qr-measure-wide);
}
}

/* --- site-narrow.css --- */
@media (width < 744px) {
@layer site {
.hero {
  padding: var(--qr-space-7) 0;
}

.hero-grid {
  grid-template-columns: 1fr;
  gap: var(--qr-space-7);
}

.lanes {
  grid-template-columns: 1fr;
  gap: var(--qr-space-6);
}

.hero-left {
  padding-right: 0;
}

.timeline-header {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--qr-space-2);
}
}
}