:root {
  --italic-regular: 400;
  --size-xs: 0.78rem;
  --size-sm: 0.93rem;
  --size-4xl: 2.488rem;
  --lh-captions: 1.4;
  --surface: oklch(98% 0.012 75);
  --accent-soft: oklch(92% 0.025 32);
  --space-0: 0;
  --space-7: 4rem;
  --space-8: 6rem;
  --space-9: 8rem;
  --page-max: 80rem;
  --breakpoints-sm: 32rem;
  --breakpoints-md: 48rem;
  --breakpoints-lg: 64rem;
  --breakpoints-xl: 80rem;
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --easing-base: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-out: cubic-bezier(0, 0, 0.2, 1);
  --selection-bg: oklch(92% 0.025 32);
  --selection-fg: var(--ink);
}

/* ─────────────────────────────────────────────────────────────────────
   Card grid — broadsheet table-of-contents shape
   Each card is a numbered entry, not a boxed object. The list itself
   has a heavy top rule; the cards have hairlines between them.
   ───────────────────────────────────────────────────────────────────── */
.card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--ink);
}
.card-list .card {
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 56rem) {
  .card-list[data-cols="2"] {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-5);
  }
  .card-list[data-cols="2"] .card { border-right: 0; }
  .card-list[data-cols="2"] .card:nth-child(even) { border-left: 1px solid var(--rule); padding-left: var(--space-5); }
  .card-list[data-cols="3"] {
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--space-4);
  }
  .card-list[data-cols="3"] .card:nth-child(n+2) { border-left: 1px solid var(--rule); padding-left: var(--space-4); }
}

.card {
  position: relative;
  padding: var(--space-4) 0;
  transition: background-color 200ms ease;
}
.card a {
  display: grid;
  gap: var(--space-2);
  text-decoration: none;
  color: inherit;
  padding: var(--space-1) 0;
}
.card .card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-style: italic;
  color: var(--ink-soft);
  margin: 0;
}
.card .card-meta .number {
  font-feature-settings: "lnum";
  font-style: normal;
  letter-spacing: 0;
  color: var(--ink);
  font-weight: var(--weight-semibold);
  font-size: 0.9rem;
}
.card .card-meta .dot {
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--accent-base);
  display: inline-block;
  flex-shrink: 0;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.card[data-status="shipped"] .dot { background: var(--accent-strong); }
.card[data-status="building"] .dot {
  background: var(--accent-base);
  box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent-base) 60%, transparent);
}
.card[data-status="lead-engineer"] .dot { background: var(--ink); border: 2px solid var(--accent-base); width: 0.7em; height: 0.7em; }
.card .card-title {
  font-size: clamp(1.35rem, 1.8vw + 0.6rem, 1.75rem);
  font-weight: var(--weight-semibold);
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.card .card-summary {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  max-width: 36ch;
  text-wrap: pretty;
}
.card .card-action {
  margin: var(--space-1) 0 0;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}
.card .card-action .arrow {
  color: var(--accent-strong);
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover — the entry "lifts" with a paper-tone shift and the arrow advances */
@media (prefers-reduced-motion: no-preference) {
  .card a { transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1); }
  .card:hover a { transform: translateX(0.25rem); }
  .card:hover .card-action .arrow { transform: translateX(0.35em); }
  .card[data-status="building"]:hover .dot {
    box-shadow: 0 0 0 0.4em color-mix(in oklch, var(--accent-base) 25%, transparent);
  }
}
.card:hover .card-title { color: var(--accent-strong); }
.card:hover .card-action { color: var(--ink); }

/* ─────────────────────────────────────────────────────────────────────
   Feature card — singular-card visual weight in #active-now (Option A)
   PetFoodVerify gets full hero-ish treatment; the queue strip below
   carries the "next vertical" content in lighter type.
   ───────────────────────────────────────────────────────────────────── */
.feature-card-list {
  border-top: 2px solid var(--ink);
}
.card.feature-card {
  padding: var(--space-5) 0 var(--space-5);
}
.card.feature-card .card-title {
  font-size: clamp(1.7rem, 2.4vw + 0.8rem, 2.4rem);
  letter-spacing: -0.018em;
  margin: 0 0 var(--space-3);
  max-width: 24ch;
}
.card.feature-card .card-summary {
  font-size: var(--size-lg);
  line-height: 1.5;
  max-width: 50ch;
  color: var(--ink);
}
.card.feature-card .card-meta {
  margin-bottom: var(--space-3);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
}
.card.feature-card .card-meta .dot {
  width: 0.62em;
  height: 0.62em;
}
.card.feature-card .card-action {
  font-size: var(--size-base);
  margin-top: var(--space-3);
}

.queue-strip {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--rule);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--ink-soft);
  max-width: 60ch;
  line-height: 1.55;
}
.queue-strip .queue-label {
  font-style: normal;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--ink);
  margin-right: 0.5em;
}

/* Recent-writing empty-state CTA polish */
.recent-writing-cta {
  margin-top: var(--space-4);
}

/* ─────────────────────────────────────────────────────────────────────
   Past work band — small italic entries, not cards
   Demoted from co-equal status with owned products.
   ───────────────────────────────────────────────────────────────────── */
.past-work {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: var(--space-4) 0;
  display: grid;
  gap: var(--space-3);
}
@media (min-width: 56rem) {
  .past-work { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-5); }
}
.past-work-entry {
  display: grid;
  gap: var(--space-1);
}
.past-work-entry a, .past-work-entry .label-static {
  font-size: 1.05rem;
  font-weight: var(--weight-semibold);
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.005em;
}
.past-work-entry a:hover {
  text-decoration: underline solid var(--accent-base);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
  color: var(--accent-strong);
}
.past-work-entry .summary {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   "How I work" — narrow column, no cards, italic strapline
   ───────────────────────────────────────────────────────────────────── */
.how-we-work-body {
  max-width: var(--measure-medium, 52ch);
}
.how-we-work-body p {
  font-size: var(--size-base);
  line-height: 1.7;
  margin: 0 0 var(--space-3);
}
.how-we-work-body p.lede {
  font-size: var(--size-lg);
  line-height: 1.5;
  color: var(--ink);
  font-style: italic;
  border-left: 2px solid var(--accent-base);
  padding-left: var(--space-3);
  margin-bottom: var(--space-4);
}

/* Recent writing — empty state with confidence */
.recent-writing-empty {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-style: italic;
  color: var(--ink-soft);
  max-width: var(--measure-medium, 52ch);
}
.recent-writing-empty .lede {
  font-size: var(--size-lg);
  font-style: normal;
  color: var(--ink);
  margin: 0;
}
.recent-writing-empty p { margin: 0; }
.recent-writing-empty a {
  color: var(--ink);
  text-decoration: underline solid var(--accent-base);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
  font-style: normal;
}

/* ─────────────────────────────────────────────────────────────────────
   Section ornament between sections — like a printer's mark
   ───────────────────────────────────────────────────────────────────── */
.ornament {
  text-align: center;
  margin: var(--space-7) 0;
  color: var(--accent-base);
  font-size: 1.5rem;
  letter-spacing: 1.5em;
  user-select: none;
}

/* ─────────────────────────────────────────────────────────────────────
   Footer — colophon-style, italic small caps, accent rule above
   ───────────────────────────────────────────────────────────────────── */
.site-footer {
  max-width: 64rem;
  margin: var(--space-9) auto 0;
  padding: var(--space-6) var(--space-4) var(--space-5);
  border-top: 1px solid var(--ink);
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.site-footer::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 6rem; height: 4px;
  background: var(--accent-strong);
  border-bottom: 1px solid var(--ink);
}
@media (min-width: 48rem) {
  .site-footer { grid-template-columns: 2fr 1fr 1fr; gap: var(--space-5); }
}
.site-footer .colophon-label {
  font-style: italic;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--space-2);
}
.site-footer p { margin: 0 0 var(--space-2); max-width: 40ch; }
.site-footer a { color: var(--ink); text-decoration: underline solid var(--accent-base); text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; }
.site-footer a:hover { text-decoration-color: var(--accent-strong); }
.site-footer .copyright {
  font-style: italic;
  font-size: 0.82rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}

/* ─────────────────────────────────────────────────────────────────────
   Per-content-type page polish (product, capability, essay)
   ───────────────────────────────────────────────────────────────────── */
article.product, article.capability, article.essay {
  max-width: 56rem;
}
article.product header, article.capability header {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--rule);
}
article.product header h1, article.capability header h1 {
  font-size: clamp(2rem, 3.5vw + 0.8rem, 3rem);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.018em;
  line-height: 1.1;
  max-width: 22ch;
  margin: 0 0 var(--space-3);
}
article.product header .status-badge,
article.capability header .status-badge {
  display: inline-block;
  font-style: italic;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin: 0 0 var(--space-2);
}
article.product header .lede, article.capability header .lede {
  font-size: var(--size-lg);
  line-height: 1.5;
  color: var(--ink);
  max-width: 50ch;
  margin: 0;
}
article.product section, article.capability section { margin: var(--space-6) 0; }
article.product section h2, article.capability section h2 {
  font-size: var(--size-lg);
  font-style: italic;
  font-weight: var(--weight-regular);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--rule);
}
article.product .public-block ul, article.capability .public-block ul,
article.product .proof ul, article.capability .evidence ul {
  list-style: none; padding: 0; margin: 0;
}
article.product .public-block li, article.capability .public-block li,
article.product .proof li, article.capability .evidence li {
  border-bottom: 1px solid var(--rule);
  padding: var(--space-2) 0;
  max-width: var(--measure-body);
}
article.product .public-block li:last-child, article.capability .public-block li:last-child,
article.product .proof li:last-child, article.capability .evidence li:last-child {
  border-bottom: none;
}
article.product section.narrative p, article.capability section.narrative p {
  font-size: var(--size-base);
  line-height: 1.75;
  margin: 0 0 var(--space-3);
  max-width: var(--measure-body);
}

/* Essay */
article.essay .essay-meta {
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-style: italic;
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--rule);
}
article.essay .essay-body { max-width: var(--measure-body); }
article.essay .essay-body h2 { margin-top: var(--space-6); font-size: var(--size-xl); }
article.essay .essay-body h2::before {
  content: "§ ";
  color: var(--accent-base);
}

/* Aggregation index pages — mirror the homepage card-list aesthetic */
.product-cards, .capability-cards, .essay-cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0;
  border-top: 1px solid var(--ink);
}
.product-card, .capability-card, .essay-card {
  border-bottom: 1px solid var(--rule);
  padding: var(--space-4) 0;
}
.product-card a, .capability-card a, .essay-card a {
  display: grid; gap: var(--space-2); text-decoration: none; color: inherit;
}
.product-card h3, .capability-card h2, .essay-card h2 {
  font-size: clamp(1.3rem, 1.5vw + 0.6rem, 1.6rem);
  font-weight: var(--weight-semibold);
  margin: 0;
  letter-spacing: -0.01em;
}
.product-card[data-status="shipped"] h3::before,
.product-card[data-status="building"] h3::before,
.product-card[data-status="planned"] h3::before {
  content: "•";
  margin-right: 0.4em;
  font-size: 1.6em;
  vertical-align: -0.08em;
  color: var(--accent-base);
}
.product-card[data-status="shipped"] h3::before { color: var(--accent-strong); }
.product-card p, .capability-card p, .essay-card p {
  margin: 0;
  font-size: 1rem;
  color: var(--ink);
  max-width: 50ch;
}
.capability-card .example {
  font-style: italic;
  color: var(--ink-soft);
}
.essay-meta { font-style: italic; color: var(--ink-soft); font-size: 0.85rem; }
.audience-tag { font-style: italic; }
.status-group { margin: var(--space-5) 0; }
.status-group h2 {
  font-size: 0.82rem;
  font-style: italic;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: var(--space-5) 0 var(--space-3);
  font-weight: var(--weight-regular);
}

/* Smooth scrolling for anchor jumps; respects reduced-motion */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ─────────────────────────────────────────────────────────────────────
   Contact form — editorial broadsheet shape; fields stacked, generous space
   ───────────────────────────────────────────────────────────────────── */
.page-header { margin-bottom: var(--space-6); }
.page-header .hero-eyebrow { margin-bottom: var(--space-3); }
.page-header h1 {
  font-size: clamp(2rem, 4vw + 0.8rem, 3.4rem);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.022em;
  line-height: 1.05;
  max-width: 18ch;
  margin: 0;
  text-wrap: balance;
}
/* ---------- Editorial pages (about, work, products, capabilities, indexes) ----------
   Shared system: hero header with rule + eyebrow + h1 + italic deck;
   two-column body+aside grid at desktop; numbered sections with terracotta
   numerals; em-dash bullet lists; ornaments. Mirrors the homepage and
   contact-form aesthetic across every interior page. */

.editorial-page {
  display: grid;
  gap: var(--space-6);
}
.editorial-header h1 {
  font-size: clamp(2rem, 4vw + 1rem, var(--size-3xl));
  letter-spacing: -0.018em;
  line-height: 1.1;
  margin: var(--space-2) 0 var(--space-3);
  text-wrap: balance;
}
.editorial-deck {
  font-size: var(--size-lg);
  line-height: 1.45;
  color: var(--ink);
  font-style: italic;
  max-width: 42ch;
  margin: 0;
}
.editorial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}
@media (min-width: 56rem) {
  .editorial-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
    gap: var(--space-7, 4rem);
  }
}
.editorial-body { min-width: 0; max-width: 56ch; }
.editorial-body > p:first-of-type {
  font-size: var(--size-lg);
  line-height: 1.5;
  color: var(--ink);
  margin-top: 0;
}
.editorial-body p { margin: 0 0 var(--space-4); }
.editorial-body a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent-base);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
.editorial-body a:hover { text-decoration-thickness: 2px; }
.editorial-body strong { font-weight: var(--weight-semibold); }
.editorial-body em { font-style: italic; }

/* Auto-numbered H2s: counter-driven 01/02/03 prefix in italic terracotta */
.editorial-body { counter-reset: section; }
.editorial-body h2 {
  counter-increment: section;
  font-size: var(--size-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.008em;
  line-height: 1.2;
  margin: var(--space-6) 0 var(--space-3);
  position: relative;
}
.editorial-body h2::before {
  content: counter(section, decimal-leading-zero) "  4  ";
  color: var(--accent-strong);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: 0.65em;
  letter-spacing: 0.06em;
  vertical-align: 0.32em;
}
.editorial-body h2:first-of-type { margin-top: 0; }
.editorial-body h3 {
  font-size: var(--size-lg);
  font-weight: var(--weight-semibold);
  margin: var(--space-5) 0 var(--space-2);
}
.editorial-body ul, .editorial-body ol {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  display: grid;
  gap: var(--space-2);
}
.editorial-body li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--ink);
  line-height: 1.55;
}
.editorial-body li::before {
  content: "4";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-base);
  font-style: italic;
}

/* Editorial aside — marginalia rail.
   Same structural pattern as .contact-aside (which keeps its own selectors
   for the more complex form-fallback styling). */
.editorial-aside {
  display: grid;
  gap: var(--space-4);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
  padding-top: var(--space-2);
  border-top: 1px solid var(--rule);
}
@media (min-width: 56rem) {
  .editorial-aside {
    border-top: none;
    border-left: 1px solid var(--rule);
    padding: 0 0 0 var(--space-5);
    position: sticky;
    top: var(--space-5);
  }
}
.editorial-aside .aside-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-1);
}
.editorial-aside .aside-list li {
  position: relative;
  padding-left: 1rem;
}
.editorial-aside .aside-list li::before {
  content: "4";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-base);
  font-size: 0.85em;
}
.editorial-aside .aside-list li a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent-base);
  text-underline-offset: 0.22em;
}

/* Editorial ornament — caps the body or aside */
.editorial-ornament {
  margin: var(--space-6) 0 0;
  font-size: 1.2rem;
  color: var(--accent-base);
  text-align: left;
  letter-spacing: 0.4em;
  user-select: none;
}

/* Numbered sections (used in product + capability detail pages) */
.numbered-section { margin: 0 0 var(--space-6); }
.numbered-section:last-of-type { margin-bottom: var(--space-5); }
.section-eyebrow {
  font-size: 0.78rem;
  font-style: italic;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--space-3);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.section-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  color: var(--accent-strong);
  font-feature-settings: "lnum" 1, "tnum" 1;
  text-transform: none;
}
.section-body {
  font-size: var(--size-base);
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
  max-width: 56ch;
}
.outcome-section .outcome-body {
  font-size: var(--size-lg);
  line-height: 1.5;
  font-style: italic;
  color: var(--ink);
  border-left: 2px solid var(--accent-strong);
  padding-left: var(--space-4);
  max-width: 50ch;
}
.not-fit-section { opacity: 0.85; }
.not-fit-section .section-eyebrow { color: var(--ink-soft); }
.not-fit-section .section-num { color: var(--ink-soft); }

/* Em-dash bullet lists — used inside numbered sections */
.dash-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
  max-width: 56ch;
}
.dash-list li {
  position: relative;
  padding-left: 1.4rem;
  line-height: 1.55;
  color: var(--ink);
}
.dash-list li::before {
  content: "4";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-base);
  font-style: italic;
}
.dash-list-quiet li { color: var(--ink-soft); font-style: italic; }
.dash-list-quiet li::before { color: var(--ink-soft); }

/* Proof / evidence block — distinct from numbered sections, slightly recessed */
.proof-block {
  margin: var(--space-6) 0 var(--space-5);
  padding: var(--space-4) var(--space-4);
  border-top: 1px solid var(--accent-base);
  border-bottom: 1px solid var(--rule);
  background: color-mix(in oklch, var(--accent-soft) 35%, var(--paper));
}
.proof-eyebrow { color: var(--accent-strong); }
.proof-list { max-width: 50ch; }
.proof-stage {
  margin: var(--space-3) 0 0;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--ink-soft);
  max-width: 50ch;
}

/* Narrative — markdown body inside product/capability pages */
.narrative {
  margin: var(--space-6) 0 var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
}
.narrative-body { max-width: 56ch; }
.narrative-body p {
  margin: 0 0 var(--space-3);
  line-height: 1.65;
}
.narrative-body p:first-child { font-size: var(--size-lg); line-height: 1.5; }
.narrative-body em { font-style: italic; }
.narrative-body strong { font-weight: var(--weight-semibold); }

.external-cta { margin: var(--space-5) 0 0; }

/* Per-product changelog — develop-in-public ship log */
.changelog-section { margin: var(--space-6) 0 var(--space-5); }
.changelog {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
  max-width: 56ch;
  border-top: 1px solid var(--rule);
}
.changelog-entry {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.changelog-date {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--accent-strong);
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.changelog-text {
  font-size: var(--size-base);
  line-height: 1.5;
  color: var(--ink);
}
.changelog-more {
  margin: var(--space-2) 0 0;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ink-soft);
}
@media (max-width: 36rem) {
  .changelog-entry {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
  .changelog-date { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; }
}
.visitor-action .section-body {
  background: color-mix(in oklch, var(--accent-soft) 25%, var(--paper));
  padding: var(--space-3) var(--space-4);
  border-left: 2px solid var(--accent-strong);
  font-style: italic;
}

/* Status pill — terracotta dot + small caps text */
.status-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  font-style: italic;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--ink);
  text-transform: none;
}
.status-dot {
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--accent-base);
  transform: translateY(-0.05em);
}
.status-pill[data-status="building"] .status-dot { background: var(--accent-strong); }
.status-pill[data-status="shipped"] .status-dot {
  background: var(--accent-base);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--accent-soft) 80%, transparent);
}
.status-pill[data-status="planned"] .status-dot,
.status-pill[data-status="exploring"] .status-dot {
  background: transparent;
  border: 1px solid var(--accent-strong);
}
.status-pill[data-status="dormant"] .status-dot,
.status-pill[data-status="sunset"] .status-dot {
  background: var(--ink-soft);
}
.aside-status { font-size: 0.85rem; color: var(--ink); }

/* Domain tags — pet-food, healthcare, etc. */
.domain-tag {
  font-style: italic;
  color: var(--ink);
}

/* ---------- Index pages (products, capabilities, essays) ---------- */
.index-page { display: grid; gap: var(--space-6); }
.index-group { margin: 0 0 var(--space-6); }
.index-group:last-of-type { margin-bottom: var(--space-3); }
.index-group-header { margin: 0 0 var(--space-4); }
.index-group-header .section-eyebrow { margin-bottom: 0; }
.group-count {
  font-style: italic;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-transform: none;
}

.index-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}
@media (min-width: 48rem) {
  .index-card-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
}
@media (min-width: 64rem) {
  .capability-card-list,
  .essay-card-list { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

.index-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--accent-base);
  transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.index-card:hover,
.index-card:focus-within {
  border-top-color: var(--accent-strong);
  transform: translateY(-2px);
  box-shadow: 0 1px 0 var(--rule), 0 18px 32px -28px color-mix(in oklch, var(--ink) 60%, transparent);
}
.index-card a {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-5);
  color: var(--ink);
  text-decoration: none;
  height: 100%;
}
.index-card-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--accent-strong);
  font-feature-settings: "lnum" 1, "tnum" 1;
  margin-bottom: var(--space-1);
}
.index-card-status {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  font-size: 0.72rem;
  font-style: italic;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--space-1);
}
.index-card-title {
  font-size: var(--size-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.008em;
  line-height: 1.25;
  margin: 0;
  color: var(--ink);
}
.index-card-summary {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  max-width: 50ch;
}
.index-card-example {
  font-size: 0.88rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: var(--space-2) 0 0;
  padding-top: var(--space-2);
  border-top: 1px dashed var(--rule);
  max-width: 50ch;
}
.index-card-arrow {
  font-size: 0.85rem;
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--accent-strong);
  margin-top: auto;
  padding-top: var(--space-2);
  transition: padding-left 150ms ease;
}
.index-card:hover .index-card-arrow,
.index-card:focus-within .index-card-arrow { padding-left: 0.3em; }

/* Capability cards prefer single-wide layout for line-length on the example */
.capability-card-list .index-card a { grid-template-columns: 2.5rem 1fr; }
.capability-card-list .index-card-num { grid-row: 1 / span 4; padding-top: 0.18rem; text-align: right; }
.capability-card-list .index-card-title,
.capability-card-list .index-card-summary,
.capability-card-list .index-card-example,
.capability-card-list .index-card-arrow { grid-column: 2; }

/* Essay cards */
.essay-card-meta {
  display: flex;
  gap: var(--space-3);
  font-size: 0.78rem;
  font-style: italic;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--space-2);
}
.essay-card-meta .audience-tag {
  color: var(--accent-strong);
  font-style: italic;
  letter-spacing: 0.12em;
}

/* Empty state for /essays/ */
.empty-state {
  padding: var(--space-6) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent-strong);
  display: grid;
  gap: var(--space-3);
  max-width: 56ch;
}
.empty-state-lede {
  font-size: var(--size-lg);
  margin: 0;
  color: var(--ink);
}
.empty-state-body {
  font-style: italic;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.55;
}
.empty-state-cta { margin: var(--space-2) 0 0; }

/* ---------- Contact page — editorial correspondence card ----------
   Two-column desk layout at desktop: form on the left, marginalia on
   the right. Stacks single-column on mobile. The form sits on a paper
   surface raised a half-step from the page background; numbered field
   rhythm matches the homepage section eyebrows. */

.contact-page {
  display: grid;
  gap: var(--space-6);
}
.contact-header h1 {
  font-size: clamp(2rem, 4vw + 1rem, var(--size-3xl));
  letter-spacing: -0.018em;
  margin: var(--space-2) 0 var(--space-3);
  text-wrap: balance;
}
.contact-deck {
  font-size: var(--size-lg);
  line-height: 1.45;
  color: var(--ink);
  font-style: italic;
  max-width: 38ch;
  margin: 0;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}
@media (min-width: 56rem) {
  .contact-grid {
    grid-template-columns: minmax(0, 38rem) minmax(0, 18rem);
    gap: var(--space-7, 4rem);
  }
}
.contact-form-col { min-width: 0; }

.contact-form {
  position: relative;
  display: grid;
  gap: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent-strong);
  padding: var(--space-5) clamp(var(--space-4), 4vw, var(--space-6)) var(--space-6);
  box-shadow: 0 1px 0 var(--rule), 0 18px 40px -32px color-mix(in oklch, var(--ink) 55%, transparent);
}
.form-meta {
  font-size: 0.72rem;
  font-style: italic;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--space-2);
}

.form-row { display: grid; gap: var(--space-2); }
.form-row-numbered {
  grid-template-columns: 2.4rem minmax(0, 1fr);
  column-gap: var(--space-3);
  row-gap: 0;
  align-items: start;
}
.form-row-content { display: grid; gap: var(--space-2); min-width: 0; }
.form-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--size-lg);
  font-feature-settings: "lnum" 1, "tnum" 1;
  color: var(--accent-strong);
  letter-spacing: 0.02em;
  padding-top: 0.18rem;
  text-align: right;
  user-select: none;
}

.form-row label {
  font-size: 0.78rem;
  font-style: italic;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}
.form-row label .required { color: var(--accent-strong); }

.form-row input[type="email"],
.form-row input[type="text"],
.form-row select,
.form-row textarea {
  font-family: var(--font-serif);
  font-size: var(--size-base);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 1px;
  padding: 0.65rem 0.85rem;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.form-row input::placeholder,
.form-row textarea::placeholder {
  color: color-mix(in oklch, var(--ink-soft) 70%, var(--paper));
  font-style: italic;
}
.form-row textarea {
  resize: vertical;
  min-height: 9rem;
  line-height: 1.6;
}
.form-row select {
  background-color: var(--paper);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--accent-strong) 50%),
    linear-gradient(135deg, var(--accent-strong) 50%, transparent 50%);
  background-position:
    calc(100% - 1.05rem) calc(50% - 2px),
    calc(100% - 0.7rem) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
  cursor: pointer;
}
.form-row input:hover,
.form-row select:hover,
.form-row textarea:hover {
  border-color: color-mix(in oklch, var(--ink) 25%, var(--rule));
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent-soft) 70%, transparent);
}

.form-help {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--ink-soft);
  margin: 0;
}
.form-error {
  font-size: 0.85rem;
  color: var(--accent-strong);
  margin: 0;
  min-height: 1.2em;
}
.form-error:empty { display: none; }
.form-error[data-active="true"] { font-style: italic; }
.form-error-global { margin-top: var(--space-2); }

.form-actions {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
}
.form-submit {
  background: none;
  border: none;
  font-family: var(--font-serif);
  font-size: var(--size-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  text-align: left;
  justify-self: start;
  text-decoration: underline;
  text-decoration-color: var(--accent-base);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.32em;
  transition: text-decoration-thickness 150ms ease, text-underline-offset 150ms ease;
}
.form-submit:hover,
.form-submit:focus-visible {
  text-decoration-thickness: 2px;
  text-underline-offset: 0.28em;
}
.form-submit .cta-arrow { display: inline-block; transition: transform 150ms ease; }
.form-submit:hover .cta-arrow,
.form-submit:focus-visible .cta-arrow { transform: translateX(3px); }
.form-submit[disabled] {
  color: var(--ink-soft);
  cursor: progress;
  text-decoration-color: var(--ink-soft);
}

/* Honeypot — visually hidden but accessible to bots */
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important; height: 1px !important;
  opacity: 0 !important;
}

/* Marginalia rail — correspondence notes */
.contact-aside {
  display: grid;
  gap: var(--space-4);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
  padding-top: var(--space-2);
  border-top: 1px solid var(--rule);
}
@media (min-width: 56rem) {
  .contact-aside {
    border-top: none;
    border-left: 1px solid var(--rule);
    padding: 0 0 0 var(--space-5);
  }
}
.aside-block { display: grid; gap: var(--space-1); }
.aside-label {
  font-size: 0.72rem;
  font-style: italic;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin: 0;
}
.aside-body { margin: 0; max-width: 32ch; }
.aside-body a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent-base);
  text-underline-offset: 0.28em;
}
.aside-body a:hover { text-decoration-thickness: 2px; }
.aside-fallback .aside-body { font-style: italic; }
.aside-ornament {
  margin: var(--space-3) 0 0;
  font-size: 1.2rem;
  color: var(--accent-base);
  text-align: left;
  letter-spacing: 0.4em;
  user-select: none;
}

/* Markdown body below the grid — secondary "what to write about" lists */
.contact-body {
  max-width: 56ch;
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
}
.contact-body h2 {
  font-size: var(--size-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.005em;
  margin: var(--space-5) 0 var(--space-3);
}
.contact-body h2:first-child { margin-top: 0; }
.contact-body ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}
.contact-body li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--ink);
}
.contact-body li::before {
  content: "4";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-base);
  font-style: italic;
}
.contact-body p { margin: 0 0 var(--space-3); }

/* Submitted state — revealed by CSS :target on /contact#submitted */
.submitted-state {
  display: none;
  padding: var(--space-5) clamp(var(--space-4), 4vw, var(--space-5));
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent-strong);
  background: color-mix(in oklch, var(--accent-soft) 55%, var(--paper));
  margin-bottom: var(--space-4);
}
.submitted-state .lede {
  font-size: var(--size-lg);
  margin: 0 0 var(--space-2);
  color: var(--ink);
  font-style: normal;
}
.submitted-state p { margin: 0; color: var(--ink-soft); font-style: italic; max-width: 50ch; }
.submitted-ornament {
  margin: var(--space-3) 0 0 !important;
  font-style: normal !important;
  color: var(--accent-base) !important;
  letter-spacing: 0.4em;
  font-size: 1.1rem;
}
.submitted-state:target { display: block; }
/* Hide the form once a successful submit lands */
#submitted:target ~ .contact-form { display: none; }