:root {
  --c-bg: #f1f4f7;
  --c-surface: #f8fafb;
  --c-sunk: #e7ecf1;
  --c-rule: #d4dce4;
  --c-rule-faint: #e6ebf0;
  --c-rule-field: #93a2b0;
  --c-ok: #1f5a48;
  --c-ok-wash: #e3eeea;
  --c-ok-rule: #9cc0b3;
  --c-bad: #8c342c;
  --c-warn: #6d4a0e;
  --c-warn-wash: #f5ecd9;
  --c-warn-rule: #d9c08a;
  --c-bad-wash: #f5e5e3;
  --c-bad-rule: #d6a8a1;
  --c-ink: #0d141a;
  --c-ink-2: #38444e;
  --c-ink-3: #5b6975;
  --c-on-ink: #f1f4f7;
  --c-accent: #1c96c5;
  --c-accent-ink: #0d6c92;
  --c-accent-wash: #e2eff6;
  --c-accent-rule: #9dc7dd;

  --f-sans: 'Switzer', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

  --t-display: clamp(2.5rem, 1.4rem + 4.6vw, 4.75rem);
  --t-head: clamp(1.75rem, 1.45rem + 1.28vw, 2.625rem);
  --t-lead: clamp(1.1875rem, 1.09rem + 0.42vw, 1.375rem);
  --t-body: 1rem;
  --t-mono: 0.75rem;

  --lh-display: 1.04;
  --lh-head: 1.14;
  --lh-body: 1.62;
  --lh-tight: 1.35;
  --lh-mono: 1.5;
  --tr-display: -0.034em;
  --tr-head: -0.02em;
  --tr-mono: 0.11em;
  --w-medium: 500;
  --w-semi: 600;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-section: clamp(64px, 7.5vw, 120px);
  --s-hero: clamp(56px, 8vw, 112px);
  --s-panel: clamp(24px, 2.6vw, 40px);

  --r-1: 2px;

  --w-page: 1180px;
  --pad-page: clamp(20px, 4vw, 48px);
  --border: 1px;
  --rule-accent: 2px;
  --measure: 62ch;
  --h-nav: 64px;

  --ease-out: ease-out;
  --ease-entrance: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-exit: cubic-bezier(0.4, 0, 0.9, 1);
  --ease-press: cubic-bezier(0.34, 1.26, 0.64, 1);
  --dur: 160ms;
  --dur-fast: 90ms;
  --dur-reveal: 200ms;
  --stagger: 40ms;
  --reveal-y: 16px;

  --z-rules: 0;
  --z-body: 1;
  --z-prompt: 5;
  --z-nav: 10;

  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink-2);
  font-family: var(--f-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
dl,
dd,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

:focus-visible {
  outline: var(--rule-accent) solid var(--c-accent);
  outline-offset: var(--s-1);
}

::selection {
  background: var(--c-accent-wash);
  color: var(--c-ink);
}

.container {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-left: max(var(--pad-page), env(safe-area-inset-left));
  padding-right: max(var(--pad-page), env(safe-area-inset-right));
}

.mono {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
}

.skip {
  position: absolute;
  left: var(--s-4);
  top: var(--s-4);
  z-index: calc(var(--z-nav) + 1);
  transform: translateY(calc(-100% - var(--s-8)));
  background: var(--c-ink);
  color: var(--c-on-ink);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-1);
  text-decoration: none;
}

.skip:focus-visible {
  transform: translateY(0);
}

.rules {
  position: fixed;
  inset: 0;
  z-index: var(--z-rules);
  pointer-events: none;
  display: none;
}

.rules__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  height: 100%;
  border-right: var(--border) solid var(--c-rule-faint);
}

.rules__inner span {
  border-left: var(--border) solid var(--c-rule-faint);
}

@media (min-width: 768px) {
  .rules {
    display: block;
  }
}

.site-head {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: var(--c-bg);
  isolation: isolate;
}

.site-head__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--h-nav);
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  text-decoration: none;
  color: var(--c-ink);
  font-weight: var(--w-semi);
  letter-spacing: var(--tr-head);
}

.nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-6);
}

.nav__link {
  position: relative;
  display: inline-block;
  color: var(--c-ink-2);
  text-decoration: none;
  padding-block: var(--s-2);
  transition: color var(--dur) var(--ease-out);
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--rule-accent);
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease-exit);
}

.nav__link:hover,
.nav__link:focus-visible {
  color: var(--c-ink);
}

.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link[aria-current='page']::after {
  transform: scaleX(1);
  transition: transform var(--dur) var(--ease-entrance);
}

.nav__link[aria-current='page'] {
  color: var(--c-accent-ink);
}

.nav__pending {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--c-ink-3);
}

.tag {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  background: var(--c-accent-wash);
  color: var(--c-accent-ink);
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-1);
  line-height: 1;
}

.nav__toggle {
  display: none;
  align-items: center;
  gap: var(--s-3);
  background: none;
  border: var(--border) solid var(--c-rule-field);
  border-radius: var(--r-1);
  color: var(--c-ink-2);
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  padding: var(--s-2) var(--s-3);
  cursor: pointer;
  transition: transform var(--dur) var(--ease-press);
}

.nav__toggle:active {
  transform: scale(0.97);
  transition: transform var(--dur-fast) var(--ease-out);
}

.nav__bars {
  display: grid;
  gap: var(--s-1);
  width: var(--s-4);
}

.nav__bars i {
  display: block;
  height: var(--border);
  background: currentColor;
  transition: transform var(--dur) var(--ease-out);
}

.section {
  padding-block: var(--s-section);
  border-top: var(--border) solid var(--c-rule);
  scroll-margin-top: var(--h-nav);
  position: relative;
  z-index: var(--z-body);
}

.section__label {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--c-ink-3);
  margin-bottom: var(--s-5);
}

.section__label b {
  color: var(--c-accent-ink);
  font-weight: var(--w-medium);
}

.section__head {
  font-size: var(--t-head);
  line-height: var(--lh-head);
  letter-spacing: var(--tr-head);
  font-weight: var(--w-semi);
  color: var(--c-ink);
  max-width: var(--measure);
  text-wrap: balance;
}

.section__intro {
  margin-top: var(--s-5);
  max-width: var(--measure);
  font-size: var(--t-lead);
  text-wrap: pretty;
}

.hero {
  padding-block: var(--s-hero);
  position: relative;
  z-index: var(--z-body);
}

.hero__grid {
  display: grid;
  gap: var(--s-12);
  align-items: start;
}

.hero__eyebrow {
  color: var(--c-accent-ink);
  margin-bottom: var(--s-6);
}

.hero__title {
  font-size: clamp(2.25rem, 1.25rem + 3.75vw, 4rem);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  font-weight: var(--w-semi);
  color: var(--c-ink);
  text-wrap: balance;
}

.hero-word {
  position: relative;
  display: inline-block;
  padding-inline: var(--s-2);
  margin-block: var(--s-1);
  white-space: nowrap;
  vertical-align: baseline;
}

.hero-word__text {
  position: relative;
  display: inline-block;
}

.hero-word--quality {
  background: var(--c-accent-ink);
  color: var(--c-on-ink);
  padding-bottom: var(--s-1);
}

.hero-word__rule {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--rule-accent);
  background: var(--c-accent-rule);
  transform-origin: left;
}

.hero-word--security {
  padding-inline: var(--s-3);
  background: var(--c-accent-wash);
  color: var(--c-accent-ink);
}

.hero-word__bracket {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--s-2);
  border-block: var(--rule-accent) solid var(--c-accent-ink);
  pointer-events: none;
}

.hero-word__bracket--start {
  left: 0;
  border-left: var(--rule-accent) solid var(--c-accent-ink);
}

.hero-word__bracket--end {
  right: 0;
  border-right: var(--rule-accent) solid var(--c-accent-ink);
}

.hero__lead {
  margin-top: var(--s-6);
  font-size: var(--t-lead);
  max-width: var(--measure);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-6);
  margin-top: var(--s-10);
}

.hero__engineering {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--s-4);
}

.btn {
  display: inline-block;
  background: var(--c-ink);
  color: var(--c-on-ink);
  text-decoration: none;
  font-family: inherit;
  font-size: var(--t-body);
  font-weight: var(--w-medium);
  line-height: var(--lh-tight);
  padding: var(--s-3) var(--s-6);
  border: var(--border) solid var(--c-ink);
  border-radius: var(--r-1);
  cursor: pointer;
  transition:
    background var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-press);
}

.btn:active {
  transform: scale(0.98);
  transition: transform var(--dur-fast) var(--ease-out);
}

.btn:hover {
  background: var(--c-accent-ink);
  border-color: var(--c-accent-ink);
}

.btn:disabled {
  background: var(--c-ink-3);
  border-color: var(--c-ink-3);
  cursor: default;
  transform: none;
}

.link-mono {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-mono);
  color: var(--c-accent-ink);
  text-decoration: underline;
  text-decoration-color: var(--c-accent);
  text-underline-offset: var(--s-1);
  overflow-wrap: anywhere;
}

.link-mono:hover {
  text-decoration-thickness: var(--rule-accent);
}

.spec {
  border: var(--border) solid var(--c-rule);
  border-radius: var(--r-1);
  background: var(--c-surface);
}

.spec__row {
  display: grid;
  grid-template-columns: minmax(0, 17ch) minmax(0, 1fr);
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-top: var(--border) solid var(--c-rule-faint);
}

.spec__row:first-child {
  border-top: 0;
}

.spec dt {
  color: var(--c-ink-3);
  padding-top: var(--s-1);
}

.spec dd {
  color: var(--c-ink);
  text-wrap: pretty;
}

.spec--strip {
  display: grid;
  margin-top: var(--s-12);
  border-inline: 0;
  border-bottom: 0;
  background: transparent;
}

.spec--strip .spec__row {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--s-3);
  padding: var(--s-5) 0;
}

.architecture {
  margin: 0;
  min-width: 0;
  padding-top: var(--s-4);
  border-top: var(--border) solid var(--c-rule-field);
}

.architecture__heading > span {
  color: var(--c-accent-ink);
}

.architecture__heading h2 {
  margin-top: var(--s-2);
  font-size: var(--t-lead);
  font-weight: var(--w-medium);
  color: var(--c-ink);
  text-wrap: balance;
}

.architecture__drawing {
  display: block;
  width: 100%;
  height: auto;
  margin-block: var(--s-5) var(--s-2);
  overflow: visible;
}

.architecture__drawing text {
  font-family: var(--f-sans);
  font-size: 18px;
  fill: var(--c-ink);
}

.architecture__drawing .architecture__tag {
  font-family: var(--f-mono);
  font-size: 10px;
  fill: var(--c-ink-3);
}

.architecture__node,
.architecture__wire,
.architecture__junction {
  transform-box: fill-box;
  transform-origin: center;
}

.architecture__node rect {
  fill: var(--c-surface);
  stroke: var(--c-rule-field);
  stroke-width: 1;
}

.architecture__wire {
  transform-origin: left center;
  fill: none;
  stroke: var(--c-accent);
  stroke-width: 2;
}

.architecture__wire--vertical {
  transform-origin: center top;
}

.architecture__junction rect {
  fill: var(--c-accent);
}

.architecture[data-layer='interface'] [data-part='interface'] rect,
.architecture[data-layer='logic'] [data-part='logic'] rect,
.architecture[data-layer='infrastructure'] [data-part='infrastructure'] rect {
  fill: var(--c-accent-wash);
  stroke: var(--c-accent-ink);
  stroke-width: 2;
}

.architecture__controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2) var(--s-4);
}

.architecture__controls[hidden] {
  display: none;
}

.architecture__layers {
  display: flex;
  flex: 1 1 100%;
  border-bottom: var(--border) solid var(--c-rule);
}

.architecture__layers button {
  flex: 1;
  padding: var(--s-3) var(--s-1);
  min-height: 44px;
  font: inherit;
  font-size: var(--t-mono);
  font-family: var(--f-mono);
  background: transparent;
  border: 0;
  border-bottom: var(--rule-accent) solid transparent;
  color: var(--c-ink-2);
  cursor: pointer;
}

.architecture__layers button[aria-pressed='true'] {
  color: var(--c-accent-ink);
  border-bottom-color: var(--c-accent-ink);
}

.architecture__layers button:hover {
  background: var(--c-accent-wash);
}

.selection-track {
  position: relative;
  isolation: isolate;
}

.selection-track > :not(.selection-track__indicator) {
  position: relative;
  z-index: var(--z-body);
}

.selection-track__indicator {
  position: absolute;
  z-index: var(--z-rules);
  pointer-events: none;
  background: var(--c-accent-wash);
  border-bottom: var(--rule-accent) solid var(--c-accent-ink);
  transform-origin: top left;
}

.selection-track[data-selection-ready] button[aria-pressed='true'],
.selection-track[data-selection-ready] a[aria-current],
.selection-track[data-selection-ready] label:has(:checked) {
  background: transparent;
  border-bottom-color: transparent;
}

.service-explorer__choices .selection-track__indicator {
  border: var(--border) solid var(--c-accent-ink);
  border-radius: var(--r-1);
}

.service-explorer__options[data-selection-ready] label:has(:checked) {
  border-color: transparent;
}

.architecture__replay {
  min-height: 44px;
  padding: var(--s-2) 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.architecture__detail {
  min-height: 5em;
  padding-top: var(--s-2);
  max-width: 44ch;
  text-wrap: pretty;
}

.process__title strong {
  position: relative;
  display: inline-block;
  color: var(--c-accent-ink);
  font-weight: inherit;
}

.process__ownership-rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--s-1));
  height: var(--rule-accent);
  background: var(--c-accent);
  transform-origin: left;
  opacity: 0.65;
}

.process__title > span {
  display: block;
  text-wrap: balance;
}

.process__layout {
  margin-top: var(--s-12);
  display: grid;
  align-items: start;
  gap: var(--s-8);
}

.process__visual {
  min-width: 0;
  background: var(--c-surface);
  padding: var(--s-4);
  border: var(--border) solid var(--c-rule);
  border-radius: var(--r-1);
}

.process[data-enhanced] .process__visual {
  position: sticky;
  top: var(--h-nav);
  z-index: var(--z-body);
}

.process__caption {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  min-height: var(--s-10);
  color: var(--c-ink);
}

.process__count {
  flex-shrink: 0;
  color: var(--c-accent-ink);
}

.process__caption-name {
  font-size: var(--t-mono);
  font-family: var(--f-mono);
}

.process__drawing {
  display: block;
  width: 100%;
  height: auto;
  max-height: 176px;
  margin-block: var(--s-3);
  overflow: visible;
}

.process__scene {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
}

.process__visual[data-stage='scope'] [data-scene='scope'],
.process__visual[data-stage='build'] [data-scene='build'],
.process__visual[data-stage='test'] [data-scene='test'],
.process__visual[data-stage='handover'] [data-scene='handover'] {
  opacity: 1;
  transform: none;
}

.process__drawing text {
  font-family: var(--f-sans);
  font-size: 28px;
  fill: var(--c-ink);
}

.process__drawing .process__diagram-tag {
  font-family: var(--f-mono);
  font-size: 18px;
  fill: var(--c-accent-ink);
}

.process__drawing path {
  fill: none;
  stroke: var(--c-rule-field);
  stroke-width: 1;
}

.process__drawing .process__diagram-accent {
  stroke: var(--c-accent);
  stroke-width: 2;
}

.process__sheet {
  fill: var(--c-surface);
  stroke: var(--c-rule-field);
  stroke-width: 1;
}

.process__check-active {
  fill: var(--c-accent-wash);
  stroke: var(--c-accent-ink);
  stroke-width: 2;
}

.process__ownership {
  fill: var(--c-accent-wash);
  stroke: var(--c-accent-ink);
  stroke-width: 2;
}

.process__diagram-fill {
  fill: var(--c-accent);
}

.process__track {
  height: var(--rule-accent);
  background: var(--c-rule);
}

.process__track span {
  display: block;
  height: 100%;
  background: var(--c-accent-ink);
  transform: scaleX(0.25);
  transform-origin: left center;
}

.process__nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-1);
  margin-top: var(--s-3);
}

.process__nav a {
  display: grid;
  gap: var(--s-1);
  min-height: 48px;
  padding: var(--s-1);
  color: var(--c-ink-3);
  font-size: var(--t-mono);
  text-decoration: none;
  text-align: center;
}

.process__nav a[aria-current='step'] {
  color: var(--c-accent-ink);
  background: var(--c-accent-wash);
}

.process__nav a:hover {
  text-decoration: underline;
  text-underline-offset: var(--s-1);
}

.process__hint {
  display: none;
  margin-top: var(--s-5);
  color: var(--c-ink-3);
  letter-spacing: 0;
  text-transform: none;
}

.process__stage {
  padding-block: var(--s-8) var(--s-12);
  border-top: var(--border) solid var(--c-rule);
}

.process__eyebrow {
  margin-bottom: var(--s-4);
  color: var(--c-ink-3);
}

.process__stage h3 {
  margin: 0;
  font-size: var(--t-head);
  line-height: var(--lh-head);
  font-weight: var(--w-semi);
  letter-spacing: var(--tr-head);
  color: var(--c-ink);
  text-wrap: balance;
  scroll-margin-top: var(--process-clearance, calc(var(--h-nav) + var(--s-8)));
}

.process__stage[data-current='true'] .process__eyebrow {
  color: var(--c-accent-ink);
}

.process__stage > p:not(.process__eyebrow) {
  margin-top: var(--s-5);
  max-width: 52ch;
  text-wrap: pretty;
}

.process__stage .process__deliverable {
  padding-top: var(--s-5);
  border-top: var(--border) solid var(--c-rule);
  color: var(--c-ink);
}

.process__deliverable span {
  display: block;
  margin-bottom: var(--s-2);
  color: var(--c-accent-ink);
}

.process__stage > .link-mono {
  display: inline-block;
  margin-top: var(--s-6);
}

.testing-checks {
  margin-top: var(--s-6);
}

.testing-checks details {
  border: var(--border) solid var(--c-rule);
  border-bottom: 0;
}

.testing-checks details:last-child,
.testing-checks details[open],
.testing-checks details:has(+ details[open]) {
  border-bottom: var(--border) solid var(--c-rule);
}

.testing-checks details[open] {
  margin-block: var(--s-2);
  background: var(--c-surface);
  border-color: var(--c-accent-rule);
}

.testing-checks details:first-child[open] {
  margin-top: 0;
}

.testing-checks summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 56px;
  padding: var(--s-4);
  color: var(--c-ink);
  font-weight: var(--w-medium);
  cursor: pointer;
  list-style: none;
  scroll-margin-top: var(--process-clearance, calc(var(--h-nav) + var(--s-8)));
}

.testing-checks summary::-webkit-details-marker {
  display: none;
}

.testing-checks summary::after {
  content: '';
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-right: var(--border) solid currentColor;
  border-bottom: var(--border) solid currentColor;
  transform: rotate(45deg);
}

.testing-checks details[open] summary::after {
  transform: rotate(225deg);
}

.testing-checks details[open] summary {
  color: var(--c-accent-ink);
}

.testing-checks details > div {
  padding: 0 var(--s-4) var(--s-5);
  text-wrap: pretty;
}

.testing-checks details a {
  display: inline-block;
  margin-top: var(--s-3);
  color: var(--c-accent-ink);
  text-underline-offset: var(--s-1);
}

.engineering__intro {
  display: grid;
  gap: var(--s-10);
  align-items: start;
}

.engineering__scope {
  margin-top: var(--s-6);
  max-width: var(--measure);
  text-wrap: pretty;
}

.engineering__evidence {
  padding: var(--s-panel);
  border: var(--border) solid var(--c-rule);
  background: var(--c-sunk);
}

.engineering__evidence h2,
.engineering__close h2 {
  color: var(--c-ink);
  font-size: var(--t-lead);
  font-weight: var(--w-semi);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

.engineering__evidence > p:not(.section__label) {
  margin-top: var(--s-4);
  text-wrap: pretty;
}

.engineering__evidence > a {
  display: block;
  padding-block: var(--s-3);
  color: var(--c-accent-ink);
  text-underline-offset: var(--s-1);
}

.engineering__evidence > p + a {
  margin-top: var(--s-3);
}

.engineering__evidence-note {
  padding-top: var(--s-4);
  border-top: var(--border) solid var(--c-rule-field);
  color: var(--c-ink-3);
}

.engineering__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-8);
  margin-top: var(--s-12);
  padding-block: var(--s-5);
  border-top: var(--border) solid var(--c-rule);
}

.engineering__nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  text-decoration-color: var(--c-rule-field);
  text-underline-offset: var(--s-1);
}

.engineering__nav span {
  color: var(--c-accent-ink);
}

.engineering__row {
  display: grid;
  gap: var(--s-6);
  padding-block: var(--s-12);
  border-top: var(--border) solid var(--c-rule);
  scroll-margin-top: calc(var(--h-nav) + var(--s-6));
}

.engineering__row h2 {
  max-width: 22ch;
  color: var(--c-ink);
  font-size: var(--t-head);
  font-weight: var(--w-semi);
  line-height: var(--lh-head);
  text-wrap: balance;
}

.engineering__body {
  max-width: var(--measure);
  text-wrap: pretty;
}

.engineering__body > p + p,
.engineering__body > a {
  margin-top: var(--s-5);
}

.engineering__body > a {
  display: inline-block;
  color: var(--c-accent-ink);
  text-underline-offset: var(--s-1);
}

.engineering__questions {
  display: grid;
  gap: var(--s-5);
  margin-block: var(--s-6);
}

.engineering__questions dt {
  color: var(--c-ink);
  font-weight: var(--w-semi);
  margin-bottom: var(--s-1);
}

.engineering__close {
  padding-top: var(--s-8);
  border-top: var(--border) solid var(--c-rule);
}

.engineering__close > p {
  margin-top: var(--s-4);
  max-width: var(--measure);
  text-wrap: pretty;
}

@media (min-width: 1024px) {
  .engineering__intro {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: var(--s-16);
  }

  .engineering__row {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--s-16);
    padding-block: var(--s-16);
  }
}

@media (max-width: 767px) {
  .architecture__drawing text {
    font-size: 22px;
  }

  .architecture__drawing .architecture__tag {
    font-size: 11px;
  }
}

@media (min-width: 768px) {
  .spec--strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-8);
  }

  .spec--strip .spec__row {
    border-top: 0;
  }
}

.spec__link {
  color: var(--c-accent-ink);
  text-decoration-color: var(--c-accent);
  text-underline-offset: var(--s-1);
}

.spec__link:hover {
  text-decoration-thickness: var(--rule-accent);
}

@media (min-width: 768px) {
  .spec--strip {
    row-gap: 0;
  }

  /* the open-to-anyone row qualifies Intake and Confidentiality, so it runs under all four */
  .spec--strip .spec__row--new {
    grid-column: 1 / -1;
    border-top: var(--border) solid var(--c-rule-faint);
  }
}

@media (min-width: 1024px) and (min-height: 700px) {
  .process__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-20);
  }

  .process__visual {
    padding: var(--s-6);
  }

  .process[data-enhanced] .process__visual {
    top: max(calc(var(--h-nav) + var(--s-6)), calc((100svh - 440px) / 2));
  }

  .process__drawing {
    max-height: none;
    margin-block: var(--s-6);
  }

  .process__drawing text {
    font-size: 20px;
  }

  .process__drawing .process__diagram-tag {
    font-size: 12px;
  }

  .process[data-enhanced] .process__hint {
    display: block;
  }

  .process__stage {
    min-height: 60svh;
    padding-block: var(--s-12) var(--s-20);
  }
}

@media (max-height: 600px) {
  .process[data-enhanced] .process__drawing {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .process__scene {
    transition: opacity 160ms var(--ease-out), transform 200ms var(--ease-out);
  }

  .process__track span {
    transition: transform 200ms var(--ease-out);
  }
}

@media (prefers-reduced-motion: reduce) {
  .architecture__replay {
    display: none;
  }
}

.service-explorer {
  margin-top: var(--s-8);
}

.service-explorer__choices {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.service-explorer__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
}

.service-explorer__choices legend {
  padding: 0;
  margin-bottom: var(--s-4);
  color: var(--c-ink-3);
}

.service-explorer__choices label {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  min-height: 64px;
  border: var(--border) solid var(--c-rule-field);
  border-radius: var(--r-1);
  cursor: pointer;
  color: var(--c-ink);
  line-height: var(--lh-tight);
}

.service-explorer__choices input {
  flex-shrink: 0;
  margin: 0;
  accent-color: var(--c-accent-ink);
}

.service-explorer__choices label:has(:checked) {
  background: var(--c-accent-wash);
  border-color: var(--c-accent-ink);
  color: var(--c-accent-ink);
}

.service-explorer__choices label:has(:focus-visible) {
  outline: var(--rule-accent) solid var(--c-accent-ink);
  outline-offset: var(--s-1);
}

.service-explorer__panel {
  margin-top: var(--s-4);
  padding: var(--s-6);
  background: var(--c-surface);
  border: var(--border) solid var(--c-rule);
  border-radius: var(--r-1);
}

.service-explorer[hidden],
.service-explorer__panel[hidden] {
  display: none;
}

.service-explorer__panel h3 {
  font-size: var(--t-lead);
  line-height: var(--lh-head);
  font-weight: var(--w-semi);
  color: var(--c-ink);
  text-wrap: balance;
}

.service-explorer__panel dl {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-6);
}

.service-explorer__panel dl > div {
  display: grid;
  gap: var(--s-2);
}

.service-explorer__panel dt {
  color: var(--c-accent-ink);
}

.service-explorer__panel dd {
  max-width: 68ch;
  text-wrap: pretty;
}

.service-explorer__panel > .link-mono {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--s-4);
}

.service-explorer__reading {
  margin-top: var(--s-5);
  text-wrap: pretty;
}

.service-explorer__reading a {
  color: var(--c-accent-ink);
  text-underline-offset: var(--s-1);
}

.card[data-selected='true'] {
  border-color: var(--c-accent-ink);
  background: var(--c-accent-wash);
}

.card[data-selected='true'] .card__index::after {
  content: ' / Your selection';
}

@media (min-width: 768px) {
  .service-explorer__options {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .service-explorer__panel dl > div {
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    gap: var(--s-6);
  }
}

.products__list {
  display: grid;
  gap: var(--s-8);
  margin-top: var(--s-12);
}

.product-feature {
  min-width: 0;
  padding: var(--s-panel);
  background: var(--c-surface);
  border: var(--border) solid var(--c-accent-rule);
  scroll-margin-top: var(--h-nav);
}

.product-feature__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-8);
}

.product-feature__eyebrow {
  color: var(--c-ink-3);
}

.product-feature__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-2);
  background: var(--c-accent-wash);
  border: var(--border) solid var(--c-accent-rule);
  border-radius: var(--r-1);
  color: var(--c-accent-ink);
}

.product-feature__badge--ok {
  background: var(--c-ok-wash);
  border-color: var(--c-ok-rule);
  color: var(--c-ok);
}

.status-mark {
  flex: none;
  width: var(--s-2);
  height: var(--s-2);
  fill: currentColor;
}

.product-feature__grid {
  display: grid;
  align-items: center;
  gap: var(--s-10);
}

.product-feature__lead {
  margin-top: var(--s-4);
  font-size: var(--t-lead);
  color: var(--c-ink);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

.product-feature__lead strong {
  color: var(--c-accent-ink);
  font-weight: var(--w-medium);
}

.product-feature__body {
  margin-top: var(--s-4);
}

.product-feature__body > p {
  max-width: 50ch;
  text-wrap: pretty;
}

.product-feature__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
  margin-top: var(--s-6);
}

.product-feature__actions .link-mono {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.product-flow {
  min-width: 0;
  margin: 0;
}

.product-flow__label {
  color: var(--c-ink-3);
}

.product-flow__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  padding: 0;
  margin: var(--s-8) 0;
}

.product-flow__steps li {
  position: relative;
  min-width: 0;
  padding-right: var(--s-2);
}

.product-flow__node {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--s-8);
  height: var(--s-8);
  border: var(--border) solid var(--c-rule-field);
  color: var(--c-ink-3);
  margin-bottom: var(--s-4);
}

.product-flow__node--approval {
  color: var(--c-accent-ink);
  background: var(--c-accent-wash);
  border-color: var(--c-accent-ink);
}

.product-flow__node [data-sustain-pulse] {
  position: absolute;
  inset: calc(-1 * var(--s-2));
  border: var(--border) solid var(--c-accent);
  opacity: 0;
  pointer-events: none;
}

.product-flow__track {
  position: absolute;
  top: var(--s-4);
  left: var(--s-8);
  right: 0;
  height: var(--border);
  background: var(--c-rule);
}

.product-flow__track span {
  display: block;
  height: var(--rule-accent);
  background: var(--c-accent);
  transform-origin: left;
  opacity: 0;
}

.product-flow__name,
.product-flow__detail {
  display: block;
}

.product-flow__name {
  color: var(--c-ink);
  font-weight: var(--w-medium);
  line-height: var(--lh-tight);
}

.product-flow__detail {
  margin-top: var(--s-2);
  text-wrap: pretty;
}

.product-flow figcaption {
  padding-top: var(--s-5);
  border-top: var(--border) solid var(--c-rule);
  color: var(--c-ink-3);
  text-wrap: pretty;
}

.product-feature__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-8);
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: var(--border) solid var(--c-rule);
  color: var(--c-ink-3);
  text-transform: none;
}

.org-chart {
  min-width: 0;
  margin: 0;
}

.org-chart__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-8);
}

.org-chart__label {
  color: var(--c-ink-3);
}

.org-chart__counts {
  display: flex;
  gap: var(--s-2);
}

.org-chart__count {
  display: grid;
  gap: var(--s-2);
  min-width: var(--s-20);
  padding: var(--s-2) var(--s-3);
  background: var(--c-bg);
  border: var(--border) solid var(--c-rule);
  border-radius: var(--r-1);
}

.org-chart__count dt {
  color: var(--c-ink-3);
}

.org-chart__count dd {
  font-size: var(--t-head);
  font-weight: var(--w-semi);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-head);
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
}

.org-chart__count--team {
  background: var(--c-accent-wash);
  border-color: var(--c-accent-rule);
}

.org-chart__count--team dt,
.org-chart__count--team dd {
  color: var(--c-accent-ink);
}

.org-chart__tree {
  display: grid;
  justify-items: center;
}

.org-chart__you {
  display: grid;
  justify-items: center;
  gap: var(--s-1);
  min-width: calc(var(--s-20) * 2);
  padding: var(--s-3) var(--s-6);
  background: var(--c-bg);
  border: var(--border) solid var(--c-rule-field);
  border-radius: var(--r-1);
  text-align: center;
}

.org-chart__name,
.org-chart__role {
  display: block;
  line-height: var(--lh-tight);
}

.org-chart__name {
  color: var(--c-ink);
  font-weight: var(--w-medium);
}

.org-chart__role {
  color: var(--c-ink-3);
}

.org-chart__trunk,
.org-chart__bus,
.org-chart__drop {
  display: block;
  background: var(--c-rule-field);
}

.org-chart__trunk {
  width: var(--border);
  height: var(--s-6);
  transform-origin: top;
}

/* runs from the first card's center to the last one's */
.org-chart__bus {
  justify-self: stretch;
  height: var(--border);
  margin-inline: calc((100% - 4 * var(--s-3)) / 10);
}

.org-chart__hires {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-3);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.org-chart__hire {
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: center;
  min-width: 0;
}

.org-chart__drop {
  width: var(--border);
  height: var(--s-5);
  transform-origin: top;
}

.org-chart__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  width: 100%;
  padding: var(--s-4) var(--s-2);
  background: var(--c-bg);
  border: var(--border) solid var(--c-rule);
  border-radius: var(--r-1);
  text-align: center;
}

/* names wrap unevenly at tablet widths, so the states line up along the bottom */
.org-chart__state {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: auto;
  padding-top: var(--s-2);
  color: var(--c-ok);
}

.org-chart__hiring {
  display: none;
}

/* while the chart plays, a card arrives as Hiring, then turns to Hired */
.org-chart__hire[data-state='hiring'] .org-chart__card {
  border-style: dashed;
  border-color: var(--c-rule-field);
}

.org-chart__hire[data-state='hiring'] .org-chart__state {
  color: var(--c-ink-3);
}

.org-chart__hire[data-state='hiring'] .status-mark {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}

.org-chart__hire[data-state='hiring'] .org-chart__hiring {
  display: inline;
}

.org-chart__hire[data-state='hiring'] .org-chart__hired {
  display: none;
}

.org-chart figcaption {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: var(--border) solid var(--c-rule);
  color: var(--c-ink-3);
  text-wrap: pretty;
}

/* a phone shows the chart as a tree down the left edge, one row per agent */
@media (max-width: 767px) {
  .org-chart__tree {
    justify-items: stretch;
  }

  .org-chart__you {
    justify-self: start;
    justify-items: start;
    min-width: 0;
    text-align: left;
  }

  .org-chart__trunk {
    margin-left: var(--s-6);
    height: var(--s-4);
  }

  .org-chart__bus {
    display: none;
  }

  .org-chart__hires {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-left: var(--s-6);
    width: auto;
  }

  .org-chart__hire {
    position: relative;
    display: block;
    padding-left: var(--s-5);
  }

  .org-chart__hire + .org-chart__hire {
    padding-top: var(--s-2);
  }

  .org-chart__hire::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--border);
    background: var(--c-rule-field);
  }

  /* the spine stops at the middle of the last card */
  .org-chart__hire:last-child::before {
    bottom: auto;
    height: calc(50% + var(--s-1));
  }

  .org-chart__drop {
    position: absolute;
    top: 50%;
    left: 0;
    width: var(--s-5);
    height: var(--border);
    transform-origin: left;
  }

  .org-chart__hire + .org-chart__hire .org-chart__drop {
    top: calc(50% + var(--s-1));
  }

  .org-chart__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'name state'
      'role state';
    align-items: center;
    justify-items: start;
    column-gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    text-align: left;
  }

  .org-chart__card .org-chart__name {
    grid-area: name;
  }

  .org-chart__card .org-chart__role {
    grid-area: role;
  }

  .org-chart__state {
    grid-area: state;
    margin-top: 0;
    padding-top: 0;
  }
}

@media (max-width: 379px) {
  .org-chart__card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'name'
      'role'
      'state';
  }

  .org-chart__state {
    padding-top: var(--s-1);
  }
}

@media (min-width: 1024px) {
  .product-feature__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--s-16);
  }

  /* Headcount reads across the panel, so its five hires get the full width */
  .product-feature--wide .product-feature__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-12);
  }

  .product-feature--wide .product-feature__intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--s-16);
  }

  .product-feature--wide .product-feature__body {
    margin-top: 0;
  }
}

@media (max-width: 479px) {
  .product-flow__steps {
    grid-template-columns: minmax(0, 1fr);
    margin-block: var(--s-6);
  }

  .product-flow__steps li {
    display: grid;
    grid-template-columns: var(--s-8) minmax(0, 1fr);
    column-gap: var(--s-4);
    row-gap: var(--s-1);
    padding: 0 0 var(--s-6);
  }

  .product-flow__steps li:last-child {
    padding-bottom: 0;
  }

  .product-flow__node {
    grid-row: 1 / span 2;
    margin-bottom: 0;
  }

  .product-flow__name,
  .product-flow__detail {
    grid-column: 2;
    margin-top: 0;
  }

  .product-flow__track {
    top: var(--s-8);
    bottom: 0;
    left: var(--s-4);
    right: auto;
    width: var(--border);
    height: auto;
  }

  .product-flow__track span {
    width: var(--rule-accent);
    height: 100%;
    transform-origin: top;
  }
}

.fieldnote {
  position: relative;
  z-index: var(--z-body);
  display: grid;
  gap: var(--s-10);
  padding-block: var(--s-16);
  border-block: var(--border) solid var(--c-rule);
}

.fieldnote__intro > p:not(.section__label) {
  margin-top: var(--s-6);
  max-width: 48ch;
  text-wrap: pretty;
}

.fieldnote__links {
  display: grid;
  justify-items: start;
  gap: var(--s-2);
  margin-top: var(--s-6);
}

.fieldnote__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.fieldnote__landscape {
  display: none;
}

.boundary-preview {
  min-width: 0;
  padding: var(--s-5);
  border: var(--border) solid var(--c-rule);
  background: var(--c-surface);
}

.boundary-preview__head > .mono {
  color: var(--c-ink-3);
}

.boundary-preview__choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--s-4);
  border-bottom: var(--border) solid var(--c-rule);
}

.boundary-preview__choices[hidden],
.boundary-preview__panel[hidden] {
  display: none;
}

.boundary-preview__choices button {
  min-height: 48px;
  padding: var(--s-3) var(--s-1);
  border: 0;
  border-bottom: var(--rule-accent) solid transparent;
  background: transparent;
  color: var(--c-ink-2);
  font: inherit;
  cursor: pointer;
}

.boundary-preview__choices button[aria-pressed='true'] {
  color: var(--c-accent-ink);
  background: var(--c-accent-wash);
  border-bottom-color: var(--c-accent-ink);
}

.boundary-preview__choices button:hover {
  color: var(--c-accent-ink);
}

.boundary-preview__panels {
  display: grid;
}

.boundary-preview[data-enhanced] .boundary-preview__panel {
  grid-area: 1 / 1;
}

.boundary-preview[data-enhanced] .boundary-preview__panel[hidden] {
  display: block;
  visibility: hidden;
  pointer-events: none;
}

.boundary-preview__panel {
  min-width: 0;
  padding-block: var(--s-6);
}

.boundary-preview__credential {
  color: var(--c-ink-3);
  letter-spacing: 0;
}

.boundary-preview__diagram {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--s-8) minmax(0, 1fr);
  align-items: center;
  margin-block: var(--s-4) var(--s-6);
}

.boundary-preview__node {
  display: grid;
  align-content: center;
  gap: var(--s-2);
  min-height: 96px;
  padding: var(--s-3) var(--s-1);
  border: var(--border) solid var(--c-rule-field);
  background: var(--c-bg);
}

.boundary-preview__node .mono {
  color: var(--c-ink-3);
  letter-spacing: 0;
  text-transform: none;
}

.boundary-preview__node strong {
  color: var(--c-ink);
  font-weight: var(--w-medium);
}

.boundary-preview__diagram svg {
  display: block;
  width: 100%;
  fill: none;
  stroke: var(--c-ink-3);
  stroke-width: 2;
}

[data-boundary-panel='after'] .boundary-preview__node:last-child {
  border-color: var(--c-accent-ink);
  background: var(--c-accent-wash);
}

.boundary-preview__diagram .boundary-preview__gate {
  stroke: var(--c-accent-ink);
  stroke-width: 4;
}

.boundary-preview__diagram .boundary-preview__request {
  fill: var(--c-accent-ink);
  stroke: none;
  opacity: 0;
}

.boundary-preview__explanation {
  padding-top: var(--s-5);
  border-top: var(--border) solid var(--c-rule);
}

.boundary-preview__explanation h3 {
  font-size: var(--t-lead);
  line-height: var(--lh-tight);
  font-weight: var(--w-semi);
  color: var(--c-ink);
  text-wrap: balance;
}

.boundary-preview__explanation p {
  margin-top: var(--s-3);
  text-wrap: pretty;
}

.boundary-preview__note {
  padding-top: var(--s-4);
  border-top: var(--border) solid var(--c-rule);
  color: var(--c-ink-3);
  font-size: var(--t-mono);
}

@media (min-width: 768px) {
  .fieldnote {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: var(--s-12);
  }

  .boundary-preview {
    padding: var(--s-8);
  }

  .boundary-preview__diagram {
    grid-template-columns: minmax(0, 1fr) var(--s-12) minmax(0, 1fr);
  }

  .boundary-preview__node {
    padding: var(--s-3);
  }

  .fieldnote__landscape {
    display: block;
    width: 100%;
    height: 96px;
    margin-top: var(--s-6);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .testing-checks summary::after {
    transition: transform 160ms ease-out;
  }

  .testing-checks details[open] > div {
    animation: hero-rise 160ms ease-out;
  }
}

.cards {
  display: grid;
  gap: var(--s-6);
  align-items: start;
  margin-top: var(--s-10);
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  border: var(--border) solid var(--c-rule);
  border-radius: var(--r-1);
  padding: var(--s-6);
  transition:
    transform 140ms var(--ease-out),
    border-color 140ms var(--ease-out);
}

.card > p {
  max-width: 46ch;
  text-wrap: pretty;
}

.card--lead {
  border-top: var(--rule-accent) solid var(--c-accent);
  background: var(--c-surface);
}

.card:focus-within {
  transform: translate3d(0, -2px, 0);
  border-color: var(--c-accent);
}

.card:focus-within .card__index {
  color: var(--c-accent-ink);
}

@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translate3d(0, -2px, 0);
    border-color: var(--c-accent);
  }

  .card:hover .card__index {
    color: var(--c-accent-ink);
  }
}

.card__index {
  color: var(--c-ink-3);
  transition: color 140ms var(--ease-out);
}

.card__name {
  font-size: var(--t-lead);
  text-wrap: balance;
  line-height: var(--lh-head);
  letter-spacing: var(--tr-head);
  font-weight: var(--w-semi);
  color: var(--c-ink);
  margin-top: calc(var(--s-3) * -1);
}

.card__meta {
  display: grid;
  gap: var(--s-2);
  padding-top: var(--s-5);
  border-top: var(--border) solid var(--c-rule-faint);
}

.card__meta dt {
  color: var(--c-ink-3);
}

.card__meta dd {
  color: var(--c-ink-2);
  text-wrap: pretty;
}

.card__meta dd + dt {
  margin-top: var(--s-4);
}

.card__price {
  font-family: var(--f-mono);
  font-size: var(--t-lead);
  letter-spacing: var(--tr-head);
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}

.card__close {
  margin-top: auto;
  padding-top: var(--s-2);
}

.disclaimer {
  margin-top: var(--s-6);
  max-width: var(--measure);
  color: var(--c-ink-3);
  text-transform: none;
  text-wrap: pretty;
}

.code {
  margin-top: var(--s-10);
  background: var(--c-sunk);
  border: var(--border) solid var(--c-rule);
  border-radius: var(--r-1);
  padding-block: var(--s-5);
  overflow-x: auto;
}

.code__row {
  display: grid;
  grid-template-columns: minmax(0, 11ch) minmax(0, 14ch) minmax(0, 1fr);
  gap: var(--s-5);
  padding: var(--s-3) var(--s-6);
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  line-height: var(--lh-mono);
  min-width: max-content;
}

.code__group {
  color: var(--c-accent-ink);
  text-transform: uppercase;
  letter-spacing: var(--tr-mono);
}

.code__name {
  color: var(--c-ink);
}

.code__note {
  color: var(--c-ink-3);
}

.about__grid {
  display: grid;
  gap: var(--s-8);
  align-items: start;
}

.prose {
  display: grid;
  gap: var(--s-5);
  max-width: var(--measure);
  text-wrap: pretty;
}

.team-member {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-8);
  margin-top: var(--s-12);
  padding-top: var(--s-10);
  border-top: var(--border) solid var(--c-rule);
  align-items: start;
}

.team-member__identity {
  display: grid;
  justify-items: start;
  gap: var(--s-4);
}

.team-member__role {
  color: var(--c-ink-3);
}

.team-member__name {
  font-size: var(--t-head);
  line-height: var(--lh-head);
  font-weight: var(--w-semi);
  text-wrap: balance;
}

.team-member__socials {
  display: flex;
  gap: var(--s-3);
}

.team-member__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--s-12);
  height: var(--s-12);
  color: var(--c-ink-2);
  border: var(--border) solid var(--c-rule);
  border-radius: var(--r-1);
}

.team-member__social svg {
  width: var(--s-6);
  height: var(--s-6);
}

.team-member__social:hover,
.team-member__social:focus-visible {
  color: var(--c-accent-ink);
  border-color: var(--c-accent-rule);
  background: var(--c-accent-wash);
}

.team-growth {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-12);
  padding: var(--s-8);
  background: var(--c-sunk);
  border: var(--border) solid var(--c-rule);
  border-radius: var(--r-1);
}

.team-growth h2 {
  font-size: var(--t-lead);
  line-height: var(--lh-head);
  font-weight: var(--w-semi);
  text-wrap: balance;
}

.team-growth p {
  max-width: var(--measure);
  text-wrap: pretty;
}

.link-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-6);
}

.company-profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-12);
  align-items: start;
}

.company-profile__identity {
  display: grid;
  justify-items: start;
  gap: var(--s-6);
  padding: var(--s-8);
  background: var(--c-sunk);
  border: var(--border) solid var(--c-rule);
  border-radius: var(--r-1);
}

.company-profile__mark {
  display: block;
  width: min(100%, 256px);
  height: auto;
}

.company-profile__name {
  color: var(--c-ink);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  font-weight: var(--w-semi);
  text-wrap: balance;
}

.company-profile__intro {
  max-width: 28ch;
  text-wrap: pretty;
}

.company-profile__profiles {
  display: grid;
  gap: var(--s-4);
  width: 100%;
  padding-top: var(--s-6);
  border-top: var(--border) solid var(--c-rule-field);
}

.company-profile__profiles > p {
  color: var(--c-ink-3);
}

.company-profile__contents,
.company-profile__links {
  display: grid;
  gap: var(--s-3);
  list-style: none;
}

.company-profile__contents a,
.company-profile__links a,
.company-source__link,
.company-profile__note a {
  color: var(--c-accent-ink);
  text-underline-offset: var(--s-1);
  overflow-wrap: anywhere;
}

.company-profile__details {
  display: grid;
  gap: var(--s-10);
  min-width: 0;
}

.company-profile__heading {
  color: var(--c-ink);
  font-size: var(--t-lead);
  font-weight: var(--w-semi);
  line-height: var(--lh-head);
  text-wrap: balance;
  margin-bottom: var(--s-6);
  scroll-margin-top: calc(var(--h-nav) + var(--s-8));
}

.company-profile__copy {
  margin-bottom: var(--s-6);
  text-wrap: pretty;
}

.company-profile__note {
  margin-top: var(--s-5);
  color: var(--c-ink-3);
  text-wrap: pretty;
}

.company-source {
  display: grid;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
  padding: var(--s-6);
  border: var(--border) solid var(--c-rule);
  background: var(--c-sunk);
  text-wrap: pretty;
}

.company-source > .mono {
  color: var(--c-ink-3);
}

.company-source__link {
  font-weight: var(--w-semi);
}

.company-facts__status {
  color: var(--c-accent-ink);
  font-weight: var(--w-semi);
}

.company-facts__note {
  display: block;
  margin-top: var(--s-1);
  color: var(--c-ink-3);
}

.company-evidence {
  list-style: none;
}

.company-evidence > li {
  display: grid;
  gap: var(--s-4);
  padding-block: var(--s-6);
  border-top: var(--border) solid var(--c-rule);
  text-wrap: pretty;
}

.company-evidence h3 {
  color: var(--c-ink);
  font-size: var(--t-lead);
  font-weight: var(--w-semi);
  line-height: var(--lh-head);
  text-wrap: balance;
}

.company-facts > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-2);
  padding-block: var(--s-4);
  border-top: var(--border) solid var(--c-rule);
}

.company-facts dt {
  color: var(--c-ink-3);
}

.company-facts dd {
  color: var(--c-ink);
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}

.company-facts a {
  color: var(--c-accent-ink);
  text-underline-offset: var(--s-1);
}

@media (min-width: 640px) {
  .company-facts > div {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: baseline;
    gap: var(--s-6);
  }
}

@media (min-width: 1024px) {
  .company-profile {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
    gap: var(--s-16);
  }
}

.engagement-note {
  max-width: var(--measure);
  margin-top: var(--s-5);
  color: var(--c-ink-3);
  text-wrap: pretty;
}

.engagement-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--s-12);
  margin-top: var(--s-12);
}

.engagement-nav {
  padding-block: var(--s-5);
  border-block: var(--border) solid var(--c-rule);
}

.engagement-nav > p {
  color: var(--c-ink-3);
}

.engagement-nav ol {
  display: grid;
  gap: var(--s-1);
  margin: var(--s-4) 0 0;
  padding-left: var(--s-8);
}

.engagement-nav li {
  padding-left: var(--s-2);
}

.engagement-nav li::marker {
  color: var(--c-ink-3);
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  font-variant-numeric: tabular-nums;
}

.engagement-nav a {
  display: block;
  padding-block: var(--s-2);
  text-underline-offset: var(--s-1);
  text-decoration-color: var(--c-rule-field);
}

.engagement-nav a:hover {
  color: var(--c-accent-ink);
}

.engagement-nav a[aria-current='location'] {
  color: var(--c-accent-ink);
  font-weight: var(--w-semi);
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

.engagement-nav li:has(a[aria-current='location'])::marker {
  color: var(--c-accent-ink);
}

.engagement-content {
  display: grid;
  gap: var(--s-12);
  min-width: 0;
}

.engagement-section {
  display: grid;
  gap: var(--s-5);
  min-width: 0;
  scroll-margin-top: calc(var(--h-nav) + var(--s-6));
}

.engagement-section + .engagement-section {
  padding-top: var(--s-10);
  border-top: var(--border) solid var(--c-rule);
}

.engagement-section .section__label {
  margin-bottom: 0;
}

.engagement-section h2 {
  color: var(--c-ink);
  font-size: var(--t-lead);
  font-weight: var(--w-semi);
  line-height: var(--lh-head);
  text-wrap: balance;
}

.engagement-section p {
  text-wrap: pretty;
}

.engagement-section a {
  color: var(--c-accent-ink);
  overflow-wrap: anywhere;
  text-underline-offset: var(--s-1);
}

.engagement-examples {
  display: grid;
  gap: var(--s-3);
  padding-left: var(--s-6);
  list-style: disc;
  text-wrap: pretty;
}

.payment-start {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-6);
  background: var(--c-accent-wash);
  border: var(--border) solid var(--c-accent-rule);
  border-radius: var(--r-1);
}

.payment-start__amount {
  color: var(--c-accent-ink);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  font-weight: var(--w-semi);
  font-variant-numeric: tabular-nums;
}

.payment-start h3 {
  margin-bottom: var(--s-2);
  color: var(--c-ink);
  font-size: var(--t-body);
  font-weight: var(--w-semi);
  text-wrap: balance;
}

.payment-example {
  min-width: 0;
  padding: var(--s-5);
  background: var(--c-sunk);
  border: var(--border) solid var(--c-rule);
  border-radius: var(--r-1);
}

.payment-example > p + p {
  margin-top: var(--s-3);
}

.payment-example table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--s-5);
}

.payment-example th,
.payment-example td {
  padding-block: var(--s-4);
  border-top: var(--border) solid var(--c-rule-field);
  text-align: left;
  vertical-align: top;
}

.payment-example th {
  font-weight: var(--w-medium);
}

.payment-example th:first-child {
  padding-right: var(--s-4);
}

.payment-example td,
.payment-example thead th:last-child {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.payment-example th span {
  display: block;
  margin-top: var(--s-1);
  color: var(--c-ink-3);
  font-weight: 400;
}

.payment-example tfoot {
  color: var(--c-ink);
  font-weight: var(--w-semi);
}

.engagement-close {
  display: grid;
  gap: var(--s-4);
  padding-top: var(--s-6);
  border-top: var(--border) solid var(--c-rule);
}

.engagement-invite {
  position: fixed;
  z-index: var(--z-prompt);
  left: max(var(--s-4), env(safe-area-inset-left));
  right: max(var(--s-4), env(safe-area-inset-right));
  bottom: max(var(--s-4), env(safe-area-inset-bottom));
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4);
  max-width: 24rem;
  background: var(--c-surface);
  border: var(--border) solid var(--c-rule-field);
  border-radius: var(--r-1);
}

.engagement-invite[hidden] {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes engagement-invite-enter {
    from {
      opacity: 0;
      transform: translate3d(0, var(--s-3), 0) scale(0.98);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  .engagement-invite:not([hidden]) {
    transform-origin: bottom left;
    animation: engagement-invite-enter var(--dur-reveal) var(--ease-out) backwards;
  }
}

.engagement-invite__title {
  color: var(--c-ink);
  font-size: var(--t-body);
  font-weight: var(--w-semi);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

.engagement-invite__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
}

.engagement-invite__actions .btn {
  padding-inline: var(--s-4);
}

.engagement-invite__dismiss {
  padding: var(--s-3) var(--s-2);
  border: 0;
  background: none;
  color: var(--c-ink-2);
  font: inherit;
  text-decoration: underline;
  text-decoration-color: var(--c-rule-field);
  text-underline-offset: var(--s-1);
  cursor: pointer;
}

.engagement-invite__dismiss:hover {
  color: var(--c-accent-ink);
}

.engagement-invite:not([hidden]) ~ .site-foot {
  padding-bottom: calc(var(--s-10) + var(--engagement-invite-space, 0px) + var(--s-6));
}

@media (min-width: 640px) {
  .payment-start {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s-8);
  }
}

@media (min-width: 1024px) {
  .engagement-layout {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.5fr);
    gap: var(--s-16);
  }

  .engagement-nav {
    position: sticky;
    top: var(--engagement-nav-top, calc(var(--h-nav) + var(--s-6)));
    max-height: calc(100dvh - var(--h-nav) - var(--s-12) - var(--engagement-invite-space, 0px));
    padding-right: var(--s-2);
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .engagement-invite {
    left: var(--engagement-invite-left, var(--pad-page));
    right: auto;
    bottom: max(var(--s-6), env(safe-area-inset-bottom));
    width: var(--engagement-invite-width, 20rem);
    max-width: none;
  }
}

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-12);
  align-items: start;
}

.contact__aside {
  display: grid;
  gap: var(--s-5);
  max-width: var(--measure);
}

.field {
  display: grid;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}

.field label {
  color: var(--c-ink-3);
}

.field__hint {
  color: var(--c-ink-3);
  text-wrap: pretty;
}

.field input,
.field textarea {
  font-family: inherit;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-surface);
  border: var(--border) solid var(--c-rule-field);
  border-radius: var(--r-1);
  padding: var(--s-3) var(--s-4);
  width: 100%;
  transition: border-color var(--dur) var(--ease-out);
}

.field textarea {
  resize: vertical;
  min-height: var(--s-20);
}

.field input:hover,
.field textarea:hover {
  border-color: var(--c-ink-3);
}

.form__status {
  margin-top: var(--s-5);
  max-width: var(--measure);
  text-wrap: pretty;
  color: var(--c-ink);
  background: var(--c-sunk);
  border: var(--border) solid var(--c-rule);
  border-radius: var(--r-1);
  padding: var(--s-3) var(--s-4);
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  transition:
    opacity var(--dur) var(--ease-entrance),
    transform var(--dur) var(--ease-entrance);
}

.form__status:empty {
  margin-top: 0;
  padding: 0;
  border: 0;
  background: none;
}

.form__status:not(:empty) {
  opacity: 1;
  transform: none;
}

.form__status[data-tone='ok'] {
  color: var(--c-ok);
  background: var(--c-ok-wash);
  border-color: var(--c-ok-rule);
}

.form__status[data-tone='error'] {
  color: var(--c-bad);
  background: var(--c-bad-wash);
  border-color: var(--c-bad-rule);
}

.form__note {
  margin-top: var(--s-5);
  max-width: var(--measure);
  text-wrap: pretty;
  color: var(--c-ink);
  background: var(--c-sunk);
  border: var(--border) solid var(--c-rule);
  border-radius: var(--r-1);
  padding: var(--s-3) var(--s-4);
}

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

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cf-turnstile {
  margin-bottom: var(--s-5);
}

/* widget is a fixed 300px; the content box is 280px at a 320px viewport */
@media (max-width: 359px) {
  .cf-turnstile {
    transform: scale(0.9);
    transform-origin: left top;
  }
}

.site-foot {
  border-top: var(--border) solid var(--c-rule);
  padding-block: var(--s-10);
  position: relative;
  z-index: var(--z-body);
}

.site-foot__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  color: var(--c-ink-3);
}

@media (min-width: 640px) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card--lead {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: var(--s-16);
  }

  .cards {
    grid-template-columns: 1.6fr 1fr 1fr;
  }

  .card--lead {
    grid-column: auto;
    padding: var(--s-10);
  }

  .card:last-child {
    margin-top: var(--s-8);
  }

  .about__grid,
  .team-member {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--s-16);
  }

  .contact__grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--s-16);
  }
}

@media (max-width: 767px) {
  .site-head__bar {
    flex-wrap: wrap;
  }

  .js .nav__toggle {
    display: inline-flex;
  }

  .js .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: block;
    background: var(--c-surface);
    border-bottom: var(--border) solid var(--c-rule);
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, -6px, 0);
    transition:
      opacity 120ms var(--ease-exit),
      transform 120ms var(--ease-exit),
      visibility 0s linear 120ms;
  }

  .js .nav[data-open='true'] {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
      opacity var(--dur) var(--ease-entrance),
      transform var(--dur) var(--ease-entrance),
      visibility 0s;
  }

  .js .nav .nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-5);
    padding-block: var(--s-5) var(--s-6);
    padding-inline:
      max(var(--pad-page), env(safe-area-inset-left))
      max(var(--pad-page), env(safe-area-inset-right));
  }

  .nav__toggle[aria-expanded='true'] .nav__bars i:first-child {
    transform: translateY(calc(var(--s-1) + var(--border))) rotate(45deg);
  }

  .nav__toggle[aria-expanded='true'] .nav__bars i:last-child {
    transform: translateY(calc((var(--s-1) + var(--border)) * -1)) rotate(-45deg);
  }
}

@media (max-width: 639px) {
  .code {
    overflow-x: visible;
  }

  .code__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-1);
    min-width: 0;
  }

  .code__group:empty {
    display: none;
  }

  .code__row + .code__row {
    border-top: var(--border) solid var(--c-rule-faint);
    margin-top: var(--s-2);
    padding-top: var(--s-4);
  }
}

@media (max-width: 559px) {
  .spec__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-2);
  }

  .spec dt {
    padding-top: 0;
  }
}

/* --------------------------------------------------------------- identity */

.wordmark__mark {
  height: 1.125rem;
  width: auto;
  flex: none;
  color: var(--c-accent);
  position: relative;
  top: 0.223rem;
}

/* ---------------------------------------------------------------- density */

#stack {
  padding-block: var(--s-12);
  border-top: 0;
  background: var(--c-surface);
}

#about {
  padding-block: calc(var(--s-section) * 1.35);
}

#contact {
  padding-block: var(--s-section) var(--s-16);
}

/* ----------------------------------------------------------------- motion */

.head-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.site-head::before,
.site-head::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  opacity: 1;
  pointer-events: none;
  transition: opacity 140ms var(--ease-out);
}

.site-head::before {
  top: 0;
  bottom: 0;
  background: var(--c-surface);
  z-index: -1;
}

.site-head::after {
  bottom: 0;
  height: var(--border);
  background: var(--c-rule);
}

.js .site-head::before,
.js .site-head::after {
  opacity: 0;
}

.js .site-head[data-scrolled='true']::before,
.js .site-head[data-scrolled='true']::after,
.js .site-head:has(.nav[data-open='true'])::before,
.js .site-head:has(.nav[data-open='true'])::after {
  opacity: 1;
}

.nav__bars i {
  transition: transform var(--dur) var(--ease-entrance);
}

.skip {
  transition: transform var(--dur) var(--ease-entrance);
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes rule-draw {
    from {
      transform: scaleX(0);
    }
  }

  @keyframes hero-rise {
    from {
      opacity: 0;
      transform: translate3d(0, 8px, 0);
    }
  }

  @keyframes fade-in {
    from {
      opacity: 0;
    }
  }

  @keyframes reveal-in {
    from {
      opacity: 0;
      transform: translate3d(var(--reveal-x, 0px), var(--reveal-y), 0);
    }
  }

  .js .hero__rule {
    transform-origin: left center;
    animation: rule-draw var(--dur-reveal) var(--ease-out) backwards;
  }

  .js .hero__title,
  .js .hero__lead,
  .js .hero__actions {
    animation: hero-rise var(--dur-reveal) var(--ease-out) backwards;
  }

  .js .hero__title {
    animation-delay: 40ms;
  }

  .js .hero__lead {
    animation-delay: 80ms;
  }

  .js .hero__actions {
    animation-delay: 120ms;
  }

  .js .hero .spec {
    animation: fade-in var(--dur-reveal) var(--ease-out) 160ms backwards;
  }

  .js .section--lead > .section__head,
  .js .section--lead > .section__intro {
    animation: hero-rise var(--dur-reveal) var(--ease-out) backwards;
  }

  .js .section--lead > .section__intro {
    animation-delay: 40ms;
  }

  .code__row.reveal-item {
    --reveal-x: -12px;
    --reveal-y: 0px;
  }

  .reveal-item[data-reveal='pending'] {
    opacity: 0;
    transform: translate3d(var(--reveal-x, 0px), var(--reveal-y), 0);
  }

  .reveal-item[data-reveal='entering'] {
    animation: reveal-in var(--dur-reveal) var(--ease-out) backwards;
    animation-delay: calc(var(--reveal-order, 0) * var(--stagger));
  }

  @supports (animation-timeline: scroll(root block)) {
    @keyframes reading-progress {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }

    .site-head::after {
      height: var(--rule-accent);
      background: var(--c-accent);
      transform-origin: left center;
      animation: reading-progress 1ms linear both;
      animation-timeline: scroll(root block);
    }
  }
}

/* --------------------------------------------------------------- writeups */

.section--lead {
  border-top: 0;
  padding-block: var(--s-12) var(--s-section);
}

.writeups {
  margin-top: var(--s-10);
}

.cardlist {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wcard {
  display: grid;
  gap: var(--s-3);
  padding-block: var(--s-6);
  border-top: var(--border) solid var(--c-rule);
}

.wcard:last-child {
  border-bottom: var(--border) solid var(--c-rule);
}

.wcard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  color: var(--c-ink-3);
}

.wcard__cat {
  color: var(--c-accent-ink);
}

.wcard__title {
  font-size: var(--t-lead);
  line-height: var(--lh-head);
  letter-spacing: var(--tr-head);
  font-weight: var(--w-semi);
  color: var(--c-ink);
  text-wrap: balance;
}

.wcard__title a {
  position: relative;
  display: inline;
  text-decoration: none;
}

.wcard__title a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.1em;
  height: var(--rule-accent);
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease-exit);
}

.wcard:focus-within .wcard__title a::after {
  transform: scaleX(1);
  transition: transform var(--dur) var(--ease-entrance);
}

@media (hover: hover) and (pointer: fine) {
  .wcard:hover .wcard__title a::after {
    transform: scaleX(1);
    transition: transform var(--dur) var(--ease-entrance);
  }
}

.wcard__excerpt {
  max-width: var(--measure);
  text-wrap: pretty;
}

.wcard__tags,
.writeup__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.writeup__back {
  margin-bottom: var(--s-8);
}

.writeup__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  color: var(--c-ink-3);
  margin-bottom: var(--s-6);
}

.writeup__tags {
  margin-top: var(--s-10);
  padding-top: var(--s-6);
  border-top: var(--border) solid var(--c-rule);
  max-width: var(--measure);
}

/* ------------------------------------------------------- rendered markdown */

.writeup-layout {
  display: grid;
  align-items: start;
  gap: var(--s-8);
}

.writeup {
  min-width: 0;
}

.writeup-nav {
  min-width: 0;
  background: var(--c-bg);
  border-block: var(--border) solid var(--c-rule);
  z-index: var(--z-body);
}

.writeup-nav[data-enhanced] {
  position: sticky;
  top: var(--reader-nav-top, var(--h-nav));
}

.writeup-nav summary {
  min-height: 48px;
  padding-block: var(--s-4);
  color: var(--c-ink-3);
  cursor: pointer;
}

.writeup-nav ol {
  display: grid;
  gap: var(--s-1);
  list-style: none;
  margin: 0;
  padding: 0 0 var(--s-4);
  max-height: min(55svh, 28rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.writeup-nav li[data-depth='3'] {
  padding-left: var(--s-4);
}

.writeup-nav a {
  display: block;
  min-height: 44px;
  padding: var(--s-2);
  line-height: var(--lh-tight);
  text-decoration-color: var(--c-rule-field);
  text-underline-offset: var(--s-1);
  overflow-wrap: anywhere;
}

.writeup-nav a[aria-current='location'] {
  color: var(--c-accent-ink);
  background: var(--c-accent-wash);
  text-decoration-color: currentColor;
}

.writeup-nav a:focus-visible {
  outline-offset: calc(-1 * var(--rule-accent));
}

.writeup-overview {
  padding-block: var(--s-5);
  border-block: var(--border) solid var(--c-rule);
}

.writeup-overview > .mono {
  color: var(--c-accent-ink);
}

.writeup-overview dl {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-5);
}

.writeup-overview dl > div {
  display: grid;
  gap: var(--s-2);
}

.writeup-overview dt {
  color: var(--c-ink-3);
}

.writeup-overview dd {
  color: var(--c-ink);
  text-wrap: pretty;
}

.prose--writeup :is(h2, h3, h4, h5, h6) {
  scroll-margin-top: var(--reader-clearance, calc(var(--h-nav) + var(--s-6)));
}

.prose--writeup .heading-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 32px;
  font-family: var(--f-mono);
  font-size: var(--t-body);
  font-weight: var(--w-medium);
  vertical-align: baseline;
  text-decoration: none;
}

.prose--writeup .codeblock {
  margin-inline: 0;
  border: var(--border) solid var(--c-rule);
  border-radius: var(--r-1);
  background: var(--c-surface);
  overflow: hidden;
}

.codeblock__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  color: var(--c-ink-3);
}

.codeblock__head > span {
  overflow-wrap: anywhere;
  text-transform: none;
  letter-spacing: 0;
}

.codeblock__copy {
  min-height: 44px;
  padding: var(--s-2);
  border: var(--border) solid var(--c-rule-field);
  border-radius: var(--r-1);
  background: transparent;
  color: var(--c-accent-ink);
  font: inherit;
  font-size: var(--t-mono);
  font-family: var(--f-mono);
  cursor: pointer;
}

.codeblock__copy:hover {
  background: var(--c-accent-wash);
}

.prose--writeup .codeblock pre {
  margin: 0;
  border: 0;
  border-top: var(--border) solid var(--c-rule);
  border-radius: 0;
}

.codeblock pre:focus-visible {
  outline-offset: calc(-1 * var(--rule-accent));
}

.codeblock__status:not(:empty) {
  padding: var(--s-3) var(--s-4);
  border-top: var(--border) solid var(--c-rule);
  font-size: var(--t-mono);
  font-family: var(--f-mono);
  color: var(--c-ink-2);
}

@media (min-width: 640px) {
  .writeup-overview dl > div {
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: var(--s-4);
  }
}

@media (min-width: 1024px) {
  .writeup-layout--with-nav {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: var(--s-16);
  }

  .writeup-nav {
    position: sticky;
    top: var(--reader-nav-top, calc(var(--h-nav) + var(--s-6)));
  }

  .writeup-nav ol {
    max-height: calc(100svh - var(--reader-head-height, var(--h-nav)) - 120px);
  }
}

.prose--writeup {
  display: block;
  max-width: var(--measure);
}

.prose--writeup > * + * {
  margin-top: var(--s-5);
}

.prose--writeup p,
.prose--writeup li {
  text-wrap: pretty;
}

/* first child gets no margin from the sibling rule, so space it off the intro */
.section__intro + .prose--writeup {
  margin-top: var(--s-10);
}

.prose--writeup h1 {
  font-size: var(--t-head);
  line-height: var(--lh-head);
  letter-spacing: var(--tr-head);
  font-weight: var(--w-semi);
  color: var(--c-ink);
  text-wrap: balance;
}

.prose--writeup h2,
.prose--writeup h3 {
  font-size: var(--t-lead);
  line-height: var(--lh-head);
  letter-spacing: var(--tr-head);
  font-weight: var(--w-semi);
  color: var(--c-ink);
  text-wrap: balance;
}

.prose--writeup > h2 + *,
.prose--writeup > h3 + * {
  margin-top: var(--s-3);
}

.prose--writeup > * + h2,
.prose--writeup > * + h3 {
  margin-top: var(--s-10);
}

.prose--writeup ul,
.prose--writeup ol {
  padding-left: var(--s-5);
  list-style: disc;
}

.prose--writeup ol {
  list-style: decimal;
}

.prose--writeup li + li {
  margin-top: var(--s-2);
}

.prose--writeup a {
  color: var(--c-accent-ink);
  text-underline-offset: var(--s-1);
}

.prose--writeup code {
  font-family: var(--f-mono);
  font-size: 0.875em;
  background: var(--c-sunk);
  border: var(--border) solid var(--c-rule-faint);
  border-radius: var(--r-1);
  padding: 0.1em 0.35em;
  color: var(--c-ink);
}

.prose--writeup pre {
  background: var(--c-sunk);
  border: var(--border) solid var(--c-rule);
  border-radius: var(--r-1);
  padding: var(--s-5);
  overflow-x: auto;
}

.prose--writeup pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: var(--t-mono);
  line-height: var(--lh-mono);
}

.prose--writeup blockquote {
  margin: 0;
  padding-left: var(--s-5);
  border-left: var(--border) solid var(--c-rule);
  color: var(--c-ink-3);
}

.prose--writeup hr {
  border: 0;
  border-top: var(--border) solid var(--c-rule);
  margin-block: var(--s-10);
}

.prose--writeup img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-1);
}

/* ------------------------------------------------------------ fetch states */

.skel {
  display: grid;
  gap: var(--s-3);
  padding-block: var(--s-6);
  border-top: var(--border) solid var(--c-rule);
  list-style: none;
}

.skel--article {
  border-top: 0;
  padding-block: 0;
}

.skel__line {
  display: block;
  height: var(--s-3);
  border-radius: var(--r-1);
  background: var(--c-sunk);
}

.skel__line--meta {
  width: 7rem;
  height: var(--s-2);
}

.skel__line--title {
  width: min(100%, 26rem);
  height: var(--s-5);
}

.skel__line--tags {
  width: 11rem;
  height: var(--s-2);
}

.skel__line--short {
  width: 60%;
}

.state {
  max-width: var(--measure);
  margin-top: var(--s-6);
  padding: var(--s-5) var(--s-6);
  border: var(--border) solid var(--c-rule);
  border-radius: var(--r-1);
  background: var(--c-sunk);
}

.state__title {
  font-weight: var(--w-semi);
  color: var(--c-ink);
  text-wrap: pretty;
}

.state__detail {
  margin-top: var(--s-2);
  text-wrap: pretty;
}

.state__sep {
  display: inline-block;
  width: var(--s-5);
}

.state--warn {
  color: var(--c-warn);
  background: var(--c-warn-wash);
  border-color: var(--c-warn-rule);
}

.state--error {
  color: var(--c-bad);
  background: var(--c-bad-wash);
  border-color: var(--c-bad-rule);
}

.state--wait {
  color: var(--c-accent-ink);
  background: var(--c-accent-wash);
  border-color: var(--c-rule-field);
}

.state--warn .state__title,
.state--error .state__title,
.state--wait .state__title {
  color: inherit;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes skel-pulse {
    50% {
      opacity: 0.55;
    }
  }

  .skel__line {
    animation: skel-pulse 1.4s var(--ease-out) infinite;
  }
}

/* ------------------------------------------------------------------ modal */

.modal {
  width: min(100% - 2 * var(--pad-page), 32rem);
  max-height: calc(100dvh - var(--s-16));
  padding: 0;
  color: var(--c-ink-2);
  background: var(--c-surface);
  border: var(--border) solid var(--c-rule);
  border-top: var(--rule-accent) solid var(--c-accent);
  border-radius: var(--r-1);
  overflow: auto;
}

.modal::backdrop {
  background: rgba(13, 20, 26, 0.42);
}

.modal__inner {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-8);
}

.modal__eyebrow {
  color: var(--c-accent-ink);
}

.modal__title {
  font-size: var(--t-lead);
  line-height: var(--lh-head);
  letter-spacing: var(--tr-head);
  font-weight: var(--w-semi);
  color: var(--c-ink);
  text-wrap: balance;
}

.modal__body {
  text-wrap: pretty;
}

.modal__note {
  margin-top: var(--s-2);
  padding-top: var(--s-5);
  border-top: var(--border) solid var(--c-rule-faint);
  color: var(--c-ink-3);
  text-wrap: pretty;
}

.modal__close {
  justify-self: start;
  margin-top: var(--s-2);
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes modal-rise {
    from {
      opacity: 0;
      transform: translate3d(0, 8px, 0);
    }
  }

  @keyframes backdrop-in {
    from {
      opacity: 0;
    }
  }

  .modal[open] {
    animation: modal-rise var(--dur-reveal) var(--ease-entrance);
  }

  .modal[open]::backdrop {
    animation: backdrop-in var(--dur-reveal) var(--ease-out);
  }
}

/* ---------------------------------------------------------- utility pages */

.waypoints {
  display: grid;
  max-width: var(--measure);
  margin: var(--s-10) 0 0;
  padding: 0;
  list-style: none;
}

.waypoint {
  display: grid;
  gap: var(--s-1);
  padding-block: var(--s-5);
  border-top: var(--border) solid var(--c-rule);
  color: inherit;
  text-decoration: none;
  transition: border-color 140ms var(--ease-out);
}

.waypoints li:last-child .waypoint {
  border-bottom: var(--border) solid var(--c-rule);
}

.waypoint__name {
  font-weight: var(--w-semi);
  color: var(--c-ink);
  transition: color 140ms var(--ease-out);
}

.waypoint__note {
  color: var(--c-ink-3);
  text-wrap: pretty;
}

.waypoint:focus-visible .waypoint__name {
  color: var(--c-accent-ink);
}

@media (hover: hover) and (pointer: fine) {
  .waypoint:hover {
    border-color: var(--c-accent);
  }

  .waypoint:hover .waypoint__name {
    color: var(--c-accent-ink);
  }
}

.page__stamp {
  max-width: var(--measure);
  margin-top: var(--s-10);
  padding-top: var(--s-5);
  border-top: var(--border) solid var(--c-rule);
  color: var(--c-ink-3);
}

/* ------------------------------------------------- writeup source repository */

.prose--writeup .writeup__repo,
.writeup__repo {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  max-width: var(--measure);
  margin-top: var(--s-6);
  padding: var(--s-4) var(--s-5);
  color: inherit;
  text-decoration: none;
  background: var(--c-surface);
  border: var(--border) solid var(--c-rule);
  border-radius: var(--r-1);
  transition:
    border-color 140ms var(--ease-out),
    background 140ms var(--ease-out);
}

.writeup__repo-mark {
  display: inline-flex;
  flex: none;
  color: var(--c-ink-2);
  transition: color 140ms var(--ease-out);
}

.writeup__repo-mark svg {
  width: var(--s-6);
  height: var(--s-6);
}

.writeup__repo-text {
  display: grid;
  gap: var(--s-1);
  min-width: 0;
}

.writeup__repo-name {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-mono);
  color: var(--c-ink);
  overflow-wrap: anywhere;
  transition: color 140ms var(--ease-out);
}

.writeup__repo-action {
  color: var(--c-accent-ink);
  font-weight: var(--w-semi);
}

.writeup__repo-note {
  color: var(--c-ink-3);
  text-wrap: pretty;
}

.writeup__repo:focus-visible .writeup__repo-name,
.writeup__repo:focus-visible .writeup__repo-mark {
  color: var(--c-accent-ink);
}

@media (hover: hover) and (pointer: fine) {
  .writeup__repo:hover {
    background: var(--c-accent-wash);
    border-color: var(--c-accent-rule);
  }

  .writeup__repo:hover .writeup__repo-name,
  .writeup__repo:hover .writeup__repo-mark {
    color: var(--c-accent-ink);
  }
}

/* --------------------------------------------------------- status and log */

.statuspanel {
  max-width: var(--measure);
  margin-top: var(--s-10);
}

.checks {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background: var(--c-surface);
  border: var(--border) solid var(--c-rule);
  border-radius: var(--r-1);
}

.check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border-top: var(--border) solid var(--c-rule-faint);
}

.check:first-child {
  border-top: 0;
}

.check--pending {
  grid-template-columns: minmax(0, 1fr) auto;
}

.check__dot {
  width: var(--s-2);
  height: var(--s-2);
  border-radius: 50%;
  background: var(--c-ink-3);
}

.check[data-state='ok'] {
  background: var(--c-ok-wash);
  border-top-color: var(--c-ok-rule);
}

.check[data-state='down'] {
  background: var(--c-bad-wash);
  border-top-color: var(--c-bad-rule);
}

.check[data-state='ok'] .check__dot {
  background: var(--c-ok);
}

.check[data-state='down'] .check__dot {
  background: var(--c-bad);
}

.check__name {
  color: var(--c-ink);
}

.check__value {
  color: var(--c-ink-3);
  text-transform: none;
}

.check[data-state='ok'] .check__value {
  color: var(--c-ok);
}

.check[data-state='down'] .check__value {
  color: var(--c-bad);
}

.check--pending .skel__line {
  width: 8rem;
}

.check--pending .check__value .skel__line {
  width: 4rem;
}

.checks__stamp {
  margin-top: var(--s-3);
  color: var(--c-ink-3);
  text-transform: none;
}

.section__label--sub {
  margin-top: var(--s-16);
  margin-bottom: var(--s-5);
}

.changelog {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.logentry {
  display: grid;
  gap: var(--s-2);
  padding-block: var(--s-6);
  border-top: var(--border) solid var(--c-rule);
}

.changelog li:last-child {
  border-bottom: var(--border) solid var(--c-rule);
}

.logentry__date {
  color: var(--c-ink-3);
}

.logentry__body {
  display: grid;
  gap: var(--s-2);
}

.logentry__title {
  font-size: var(--t-body);
  font-weight: var(--w-semi);
  color: var(--c-ink);
  text-wrap: balance;
}

.logentry__body p {
  max-width: var(--measure);
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .logentry {
    grid-template-columns: minmax(0, 12ch) minmax(0, 1fr);
    gap: var(--s-6);
  }

  .logentry__date {
    padding-top: 0.2em;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}

.status-banner {
  background: var(--c-warn-wash);
  color: var(--c-warn);
  border-bottom: var(--border) solid var(--c-warn-rule);
  padding: var(--s-2) var(--pad-page);
  text-align: center;
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
}