@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);
}
}

/* --- palettes/ink.css --- */
@layer quire {
/* Ink. */

:root {
  --qr-col-bg: #0a0c12;
  --qr-col-bg-secondary: #12151e;
  --qr-col-text: #e4e8f0;
  --qr-col-text-secondary: #9aa3b5;
  --qr-col-text-muted: #6b7384;
  --qr-col-border: #222836;
  --qr-col-bg-elevated: #1a1f2b;
  --qr-col-accent-1: #7aa2ff;
  --qr-col-accent-2: #c4b5fd;
  --qr-col-accent-3: #67e8f9;
  --qr-col-accent-4: #f5d0a6;
  --qr-col-accent-hover: #93b4ff;
  --qr-col-draft: #ff4d8d;

  color-scheme: dark;
}

[data-theme="light"] {
  --qr-col-bg: #f4f6fb;
  --qr-col-bg-secondary: #e6eaf3;
  --qr-col-text: #1a2030;
  --qr-col-text-secondary: #3d4a63;
  --qr-col-text-muted: #6b7384;
  --qr-col-border: #cdd3e0;
  --qr-col-bg-elevated: #fbfcff;
  --qr-col-accent-1: #2942b8;
  --qr-col-accent-2: #5b21b6;
  --qr-col-accent-3: #0e7490;
  --qr-col-accent-4: #b45309;
  --qr-col-accent-hover: #1e3a8a;
  --qr-col-draft: #be185d;

  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-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-col-bg);
}

body {
  background: var(--qr-col-bg);
  color: var(--qr-col-text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  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;
}

/* 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-col-accent-1);
  text-decoration: none;
}

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

:focus-visible {
  outline: 2px solid var(--qr-col-accent-1);
  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-col-text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--qr-radius-s);
  padding: 0;
}

.theme-toggle:hover {
  color: var(--qr-col-text);
  background: var(--qr-col-bg-secondary);
}

.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-col-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-col-border);
  background: var(--qr-col-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-col-text-secondary);
  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-col-accent-1);
  transform: scaleX(0);
  transition: transform var(--qr-motion) ease;
}

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

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

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

.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-col-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-col-text-secondary);
}

/* 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-col-border);
  border-radius: var(--qr-radius);
  background: var(--qr-col-bg-elevated);
  font-weight: var(--qr-weight-semibold);
}

.home-section:hover {
  border-color: var(--qr-col-accent-1);
  color: var(--qr-col-accent-1);
  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-col-border);
}

.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-col-text-secondary);
}

.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-col-text-muted);
}

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

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

.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-col-text-secondary);
}

.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-date,
.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-date,
.featured-badge {
  color: var(--qr-col-accent-1);
}

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

.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-col-border);
  color: inherit;
}

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

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

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

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

.entry-date--draft {
  color: var(--qr-col-draft);
  opacity: 1;
}

.entry-context {
  color: var(--qr-col-text-secondary);
}

.site-footer {
  border-top: 1px solid var(--qr-col-border);
  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-col-text-muted);
}

.footer-inner a {
  color: var(--qr-col-text-muted);
}

.footer-inner a:hover {
  color: var(--qr-col-text);
}

.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-col-accent-1);
  font-weight: var(--qr-weight-semibold);
  border: 1px solid var(--qr-col-accent-1);
  border-radius: var(--qr-radius-s);
}

.btn-primary:hover {
  background: var(--qr-col-accent-1);
  color: var(--qr-col-bg);
  border-color: var(--qr-col-accent-1);
  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-col-text);
  font-weight: var(--qr-weight-medium);
  border: 1px solid var(--qr-col-border);
  border-radius: var(--qr-radius-s);
}

.btn-secondary:hover {
  color: var(--qr-col-text);
  border-color: var(--qr-col-text-secondary);
  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-col-text-secondary);
  background: color-mix(in srgb, currentColor 16%, transparent);
}

.status-badge--draft {
  background: var(--qr-col-draft);
  color: var(--qr-col-bg);
  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-col-text-secondary);
  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-col-text-muted);
}

.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-col-accent-1);
}

.forward-link--muted {
  color: var(--qr-col-text-muted);
}

.forward-link--muted:hover {
  color: var(--qr-col-text);
}

.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-col-border);
}

.back-link a {
  color: var(--qr-col-text-muted);
  font-weight: var(--qr-weight-medium);
}

.back-link a:hover {
  color: var(--qr-col-text);
}

.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-col-border);
  border-radius: var(--qr-radius);
  background: var(--qr-col-bg-secondary);
  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-col-text-secondary);
  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-col-bg-elevated);
}

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

.card:hover {
  color: inherit;
  border-color: var(--qr-col-accent-1);
  background: color-mix(in srgb, var(--qr-col-accent-1) 12%, var(--qr-col-bg-elevated));
  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-col-text);
}

.card-description {
  color: var(--qr-col-text-secondary);
}

.toc {
  background: var(--qr-col-bg-secondary);
  border: 1px solid var(--qr-col-border);
  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-col-text);
  list-style: none;
}

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

.toc-toggle:hover {
  background: var(--qr-col-bg-elevated);
}

.toc-title {
  color: var(--qr-col-text-secondary);
}

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

.toc-icon {
  color: var(--qr-col-text-muted);
  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-col-text-secondary);
  display: block;
}

.toc-link:hover {
  color: var(--qr-col-text);
}
}

/* --- 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 {
  grid-column: full;
}

.prose h2,
.prose h3 {
  font-weight: var(--qr-weight-bold);
  line-height: var(--qr-lead-tight);
  color: var(--qr-col-text);
  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-col-text-secondary);
}

.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-col-text);
}

.prose code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--qr-col-bg-secondary);
  padding: 0.125rem var(--qr-space-1);
  border-radius: var(--qr-radius-s);
}

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

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

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

.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
 * ships their colours. Hosts style the code block's surface (.prose pre), not
 * the tokens.
 *
 * Generated from chroma's github-dark / github styles, paired via light-dark()
 * so the palette follows color-scheme rather than a host theme attribute.
 * Tokens sharing a declaration are grouped; line-number machinery is dropped.
 * To regenerate: html.New(html.WithClasses(true)).WriteCSS from those styles.
 */
.chroma .ss { color: light-dark(#032f62, #a5d6ff); }
.chroma .no { color: light-dark(#0550ae, #79c0ff); font-weight: bold; }
.chroma .nt { color: light-dark(#0550ae, #7ee787); }
.chroma .il,
.chroma .m,
.chroma .mb,
.chroma .mf,
.chroma .mh,
.chroma .mi,
.chroma .mo { color: light-dark(#0550ae, #a5d6ff); }
.chroma .nd { color: light-dark(#0550ae, #d2a8ff); font-weight: bold; }
.chroma .o,
.chroma .or,
.chroma .ow { color: light-dark(#0550ae, #ff7b72); font-weight: bold; }
.chroma .dl,
.chroma .sa,
.chroma .se,
.chroma .sh,
.chroma .sr { color: light-dark(#0a3069, #79c0ff); }
.chroma .s,
.chroma .s1,
.chroma .s2,
.chroma .sb,
.chroma .sc,
.chroma .sd,
.chroma .si,
.chroma .sx { color: light-dark(#0a3069, #a5d6ff); }
.chroma .gi { color: light-dark(#116329, #56d364); }
.chroma .go { color: light-dark(#1f2328, #8b949e); }
.chroma .nc { color: light-dark(#1f2328, #f0883e); font-weight: bold; }
.chroma .nn { color: light-dark(#24292e, #ff7b72); }
.chroma .c,
.chroma .c1,
.chroma .ch,
.chroma .cm { color: light-dark(#57606a, #8b949e); font-style: italic; }
.chroma .cp,
.chroma .cpf,
.chroma .cs { color: light-dark(#57606a, #8b949e); font-weight: bold; font-style: italic; }
.chroma .fm,
.chroma .nf { color: light-dark(#6639ba, #d2a8ff); font-weight: bold; }
.chroma .ni { color: light-dark(#6639ba, #ffa657); }
.chroma .gu,
.chroma .ld,
.chroma .py { color: light-dark(#79c0ff, #79c0ff); }
.chroma .gh { color: light-dark(#79c0ff, #79c0ff); font-weight: bold; }
.chroma .gd { color: light-dark(#82071e, #ffa198); }
.chroma .gp { color: light-dark(#8b949e, #8b949e); }
.chroma .nv,
.chroma .vc,
.chroma .vg,
.chroma .vi,
.chroma .vm { color: light-dark(#953800, #79c0ff); }
.chroma .nl { color: light-dark(#990000, #79c0ff); font-weight: bold; }
.chroma .l { color: light-dark(#a5d6ff, #a5d6ff); }
.chroma .kc,
.chroma .kp { color: light-dark(#cf222e, #79c0ff); }
.chroma .k,
.chroma .kd,
.chroma .kn,
.chroma .kr,
.chroma .kt { color: light-dark(#cf222e, #ff7b72); }
.chroma .ne { color: light-dark(#f0883e, #f0883e); font-weight: bold; }
.chroma .err { color: light-dark(#f6f8fa, #f85149); }
.chroma .gt { color: light-dark(#ff7b72, #ff7b72); }
.chroma .gr { color: light-dark(#ffa198, #ffa198); }
.chroma .w { color: light-dark(#ffffff, #6e7681); }
.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-col-accent-1); }
.tag-2 { color: var(--qr-col-accent-2); }
.tag-3 { color: var(--qr-col-accent-3); }
.tag-4 { color: var(--qr-col-accent-4); }

/* 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 h2 + ul:not(.tags-list):not(.impact-metrics) {
  list-style: none;
  padding: 0;
}

.prose h2 + ul:not(.tags-list):not(.impact-metrics) > li {
  line-height: var(--qr-lead-body);
  padding: var(--qr-space-2) 0 var(--qr-space-2) var(--qr-space-5);
  position: relative;
}

.prose h2 + ul:not(.tags-list):not(.impact-metrics) > li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--qr-col-accent-1);
}

.status-badge--ongoing {
  color: var(--qr-col-accent-2);
}

.status-badge--archived {
  color: var(--qr-col-text-muted);
}

/* Home */

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

.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-col-text-secondary);
}

.hero-meta {
  color: var(--qr-col-text-secondary);
}

.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: 1fr 1fr;
  gap: var(--qr-space-7);
  padding-bottom: var(--qr-space-7);
  border-bottom: 1px solid var(--qr-col-border);
}

.lane {
  display: flex;
  flex-direction: column;
  gap: var(--qr-space-3);
}

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

.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-col-accent-1);
}

.lane-body,
.entry-context,
.strand-body {
  color: var(--qr-col-text-secondary);
}

.lane-shape {
  color: var(--qr-col-text-muted);
}

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

.introduction {
  max-width: 600px;
}

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

.introduction p:first-child {
  color: var(--qr-col-text);
}

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

.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-col-accent-1);
  border: 3px solid var(--qr-col-bg);
  z-index: 2;
  flex-shrink: 0;
}

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

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

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

.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-col-text-secondary);
}

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

.timeline-type[data-type="learning"] {
  color: var(--qr-col-accent-2);
}

.timeline-type[data-type="transition"] {
  color: var(--qr-col-accent-3);
}

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

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

.timeline-skills-label {
  color: var(--qr-col-text-muted);
  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,
.decision-block strong,
.metric-label {
  font-size: var(--qr-text-xs);
  font-weight: var(--qr-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--qr-track-label);
  color: var(--qr-col-accent-1);
}

.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-col-text-secondary);
}

.contact-zone a:hover {
  color: var(--qr-col-text);
}

/* Host widgets (named markdown fences). */

.decision {
  padding: var(--qr-space-5);
  margin: 0 0 var(--qr-space-6);
  border: 1px solid var(--qr-col-border);
  border-radius: var(--qr-radius);
  background: var(--qr-col-bg-secondary);
}

.decision .decision-title {
  margin: 0 0 var(--qr-space-4);
}

.decision-block {
  margin-top: var(--qr-space-4);
}

.decision-block strong {
  display: block;
  margin-bottom: var(--qr-space-2);
}

.decision .decision-block p {
  margin: var(--qr-space-2) 0 0;
}

.decision-block ul {
  list-style: none;
  padding: 0;
  margin-top: var(--qr-space-2);
}

.decision-block li {
  line-height: var(--qr-lead-body);
  padding: var(--qr-space-1) 0 var(--qr-space-1) var(--qr-space-5);
  position: relative;
  color: var(--qr-col-text-secondary);
}

.decision-block li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--qr-col-accent-1);
}

.impact-metrics {
  list-style: none;
  padding: var(--qr-space-5);
  margin: 0 0 var(--qr-space-6);
  background: color-mix(in srgb, var(--qr-col-accent-1) 12%, var(--qr-col-bg-secondary));
  border: 1px solid var(--qr-col-border);
  border-radius: var(--qr-radius);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--qr-col), 1fr));
  gap: var(--qr-space-5) var(--qr-space-6);
}

.metric-item {
  display: flex;
  flex-direction: column;
  gap: var(--qr-space-1);
}

.metric-value {
  font-size: var(--qr-text-md);
  font-weight: var(--qr-weight-semibold);
  color: var(--qr-col-accent-1);
  line-height: var(--qr-lead-tight);
}

.metric-label {
  color: var(--qr-col-text-muted);
}

.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);
}
}
}