@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("fonts/AtkinsonHyperlegibleMono.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/AtkinsonHyperlegibleNext.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

/* Layout: one engineering computation pad. The hero is lettered on the pad's grid (one mono character per cell); every later section is ruled off like a major grid line. Dark mode is the same sheet as a greenboard. */
:root {
  --pad: #EAF1E3;
  --sheet: #F6F9F2;
  --ink: #17221B;
  --ink-2: #46564B;
  --grid: #C9DBBE;
  --grid-major: #ADC6A0;
  --accent: #256B3C;
  --on-accent: #F6F9F2;
  --font-text: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --h1: clamp(2rem, 1.2rem + 3.3vw, 3.6rem);
  --maxw: 72rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pad: #16201A;
    --sheet: #1C2821;
    --ink: #E2E9DD;
    --ink-2: #A5B5A9;
    --grid: #223128;
    --grid-major: #2D4235;
    --accent: #8DCB9D;
    --on-accent: #12201A;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --pad: #16201A;
  --sheet: #1C2821;
  --ink: #E2E9DD;
  --ink-2: #A5B5A9;
  --grid: #223128;
  --grid-major: #2D4235;
  --accent: #8DCB9D;
  --on-accent: #12201A;
  color-scheme: dark;
}

/* a light choice on a dark OS: keep the slider, scrollbars, and form controls light too */
:root[data-theme="light"] {
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background: var(--pad);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

h1,
h2,
h3 {
  text-wrap: balance;
  margin: 0;
}

p {
  margin: 0;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

@media (min-width: 720px) {
  .wrap {
    padding-left: max(32px, env(safe-area-inset-left, 0px));
    padding-right: max(32px, env(safe-area-inset-right, 0px));
  }
}

/* header */
.top .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-block: 1.25rem;
}

.brand {
  display: inline-flex;
  color: var(--ink);
}

.brand svg {
  height: 1.5rem;
  width: auto;
  display: block;
}

.brand .mk,
.foot-brand .mk {
  fill: var(--accent);
}

.top nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

.top nav a {
  color: var(--ink-2);
  text-decoration: none;
}

.top nav a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.theme-toggle {
  font: inherit;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--grid-major);
  background: transparent;
  color: var(--ink-2);
  border-radius: 2px;
  cursor: pointer;
}

.theme-toggle:hover {
  color: var(--ink);
  border-color: var(--accent);
}

/* controls that need the script (theme, copy, calculator) stay hidden until site.js shows them */
[hidden] {
  display: none !important;
}

/* hero: lettered on the pad grid; 1ch of the mono face is one cell */
.hero .wrap {
  padding-block: 0.5rem 3.5rem;
}

.pad {
  font-family: var(--font-mono);
  font-size: var(--h1);
  background-color: var(--pad);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 5ch 5ch, 5ch 5ch, 1ch 1ch, 1ch 1ch;
  border: 1px solid var(--grid-major);
  padding: 1ch 1ch 1ch;
  display: grid;
  gap: 1ch;
}

@media (min-width: 960px) {
  .pad {
    grid-template-columns: minmax(0, 1fr) 25rem;
    align-items: start;
  }
}

.pad h1 {
  font-family: var(--font-mono);
  font-size: 1em;
  font-weight: 650;
  line-height: 2ch;
  letter-spacing: 0;
  text-wrap: wrap;
  max-width: 22ch;
}

.pad h1 .mk {
  color: var(--accent);
}

.hero-copy {
  display: grid;
  gap: 1.5rem;
  min-width: 0;
}

.lede {
  font-family: var(--font-text);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55;
  max-width: 40rem;
  background: var(--pad);
  box-shadow: 0 0 0 0.5rem var(--pad);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
}

.btn {
  display: inline-block;
  padding: 0.6rem 1rem;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  border-radius: 2px;
}

.btn:hover {
  text-decoration: underline;
}

.btn.ghost {
  background: var(--pad);
  color: var(--accent);
}

.yaml {
  margin: 0;
  min-width: 0;
  background: var(--sheet);
  border: 1px solid var(--grid-major);
  font-size: 0.8125rem;
  line-height: 1.7;
}

.yaml figcaption {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  padding: 0.4rem 0.9rem;
  border-bottom: 1px solid var(--grid-major);
}

.yaml pre {
  margin: 0;
  padding: 0.9rem;
  overflow-x: auto;
  font-family: var(--font-mono);
}

.yaml code {
  font-family: inherit;
}

.yaml .k {
  color: var(--ink-2);
}

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

/* sections ruled off like major grid lines */
section.ruled {
  border-top: 1px solid var(--grid-major);
}

section.ruled>.wrap {
  padding-block: 3.5rem;
  display: grid;
  gap: 2rem;
}

@media (min-width: 960px) {
  section.ruled>.wrap {
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: 2.5rem;
  }
}

.label h2 {
  font-family: var(--font-mono);
  font-size: 1.125rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.label p {
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--ink-2);
}

.body {
  min-width: 0;
  display: grid;
  gap: 1.25rem;
}

.body>p {
  max-width: 66ch;
}

/* tools */
/* Any number of projects, stacked in one column (lists never sit side by side on
   this site). Each card spans four rows (name, line, text, facts). Each card adds
   its own top margin; the list pulls the first card back up by the same amount. */
.tools {
  list-style: none;
  margin: -1.5rem 0 0;
  padding: 0;
  display: grid;
  row-gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr);
}

.tool {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 3px solid var(--ink);
  min-width: 0;
  scroll-margin-top: 5rem;
}

.tool .desc {
  display: grid;
  gap: 0.6rem;
  align-content: start;
}

.tool h3 {
  font-family: var(--font-mono);
  font-size: 1.375rem;
  font-weight: 650;
}

.tool .line {
  font-weight: 700;
  line-height: 1.4;
}

.tool p {
  font-size: 1rem;
}

.meta {
  margin: 0;
  align-self: start;
  padding-top: 0.75rem;
  display: grid;
  gap: 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  border-top: 1px solid var(--grid-major);
}

.meta div {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.5rem;
}

.meta dt {
  color: var(--ink-2);
}

.meta dd {
  margin: 0;
}

.status::before {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  margin-right: 0.45em;
  vertical-align: 0.05em;
  background: var(--accent);
}

.status.dev::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ink-2);
}

/* who pays */
.terms {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.term {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding: 1.1rem 1.1rem 1.25rem;
  background: var(--sheet);
  border: 1px solid var(--grid-major);
  min-width: 0;
}

.term h3 {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 650;
  color: var(--accent);
}

.term p {
  font-size: 1rem;
}

.order {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  counter-reset: step;
  max-width: 66ch;
}

.order li {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: baseline;
  font-size: 1rem;
}

.order li::before {
  content: counter(step);
  font-family: var(--font-mono);
  font-weight: 650;
  color: var(--on-accent);
  background: var(--accent);
  width: 1.6rem;
  height: 1.6rem;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.875rem;
}

.order-head {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--ink-2);
}

h4.order-head {
  font-weight: 650;
}

/* who pays: license table */
.sub {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 650;
  margin-top: 0.75rem;
}

.term ul {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.3rem;
}

.term li::marker {
  color: var(--accent);
}

.term .price {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--ink-2);
}

table.lic {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  background: var(--sheet);
  border: 1px solid var(--grid-major);
}

table.lic th,
table.lic td {
  text-align: left;
  vertical-align: top;
  padding: 0.65rem 0.85rem;
  border-top: 1px solid var(--grid);
}

table.lic thead th {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 650;
  color: var(--accent);
  border-top: 0;
  border-bottom: 1px solid var(--grid-major);
}

table.lic tbody th {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 650;
  color: var(--ink-2);
  width: 9.5rem;
}

/* the price table: offers on the left, two price columns set like the price sheets */
table.prices {
  max-width: 66ch;
}

table.prices tbody th {
  width: auto;
  font-family: var(--font-text);
  font-size: 0.9375rem;
  font-weight: 400;
}

table.prices td {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  white-space: nowrap;
}



@media (max-width: 759px) {

  table.lic,
  table.lic tbody,
  table.lic tr,
  table.lic th,
  table.lic td {
    display: block;
  }

  /* each cell carries its column name, so the header row leaves the page and the
     accessibility tree; the license links stay in the footer and studio.yaml */
  table.lic thead {
    display: none;
  }

  table.lic tr {
    border-top: 1px solid var(--grid-major);
    padding: 0.5rem 0;
  }

  table.lic tr:first-child {
    border-top: 0;
  }

  /* tbody th repeats the selector so it beats the fixed desktop width of the row headers */
  table.lic th,
  table.lic td,
  table.lic tbody th {
    border: 0;
    padding: 0.2rem 0.85rem;
    width: auto;
  }

  table.lic td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--ink-2);
  }
}

/* on a phone the price table keeps the two prices side by side under each offer */
@media (max-width: 759px) {
  table.prices tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 0.75rem;
  }

  table.prices tbody th {
    grid-column: 1 / -1;
  }

  /* the column names wrap differently, so line the prices up along the bottom */
  table.prices td {
    white-space: normal;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
}

.why-two {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.6rem;
  max-width: 66ch;
}

.why-two li::marker {
  color: var(--accent);
}

/* ledger: the funding list as a priority ladder */
.ladder {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: rung;
  background: var(--sheet);
  border: 1px solid var(--grid-major);
}

.rung {
  counter-increment: rung;
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  gap: 0.5rem 0.9rem;
  padding: 0.9rem 1rem;
  border-top: 1px solid var(--grid);
}

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

.rung::before {
  content: counter(rung);
  font-family: var(--font-mono);
  font-weight: 650;
  font-size: 0.875rem;
  color: var(--on-accent);
  background: var(--accent);
  width: 1.6rem;
  height: 1.6rem;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
}

.rung .fund {
  grid-column: 2;
}

@media (min-width: 760px) {
  .rung {
    grid-template-columns: 1.6rem minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: start;
  }

  .rung .fund {
    grid-column: auto;
  }
}

.rung h3 {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 650;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
}

.rung p {
  font-size: 0.9375rem;
  color: var(--ink-2);
  margin-top: 0.2rem;
}

.next {
  display: none;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 2px;
  padding: 0 0.4rem;
}

.rung.open {
  background: color-mix(in srgb, var(--accent) 8%, var(--sheet));
}

.rung.open .next {
  display: inline-block;
}

/* scoped to the ladder: the logo's mark is also a <rect class="bar"> */
.ladder .bar {
  height: 0.6rem;
  background: var(--grid);
  border: 1px solid var(--grid-major);
  border-radius: 2px;
  overflow: hidden;
}

.ladder .bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
}

.rung .amt {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--ink);
  margin-top: 0.4rem;
}

.rung .range {
  display: block;
  color: var(--ink-2);
}

.sim {
  display: grid;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--sheet);
  border: 1px solid var(--grid-major);
}

.sim label {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
}

.sim output {
  font-weight: 650;
  color: var(--accent);
}

.sim input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.chips li {
  padding: 0.75rem 0.9rem;
  background: var(--sheet);
  border: 1px solid var(--grid-major);
  font-size: 0.9375rem;
}

.chips b {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  color: var(--accent);
}

/* services */
/* the price sheet: one row per stage, ruled like a ledger, set apart by the accent edge */
.costs {
  display: grid;
  gap: 0.6rem;
  max-width: 66ch;
  padding: 1.1rem 1.25rem 0.5rem;
  background: var(--sheet);
  border: 1px solid var(--grid-major);
  border-left: 4px solid var(--accent);
}

.costs h3 {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 650;
  color: var(--accent);
}

.costs dl {
  margin: 0;
}

.costs dl>div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.25rem 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--grid);
}

.costs dt {
  font-weight: 700;
}

.costs dd {
  margin: 0;
  grid-column: 1 / -1;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.costs dd.amount {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 650;
  color: var(--ink);
  text-align: right;
}

/* the noncommercial price, under the company price */
.costs dd.amount span {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--ink-2);
}

@media (max-width: 480px) {
  .costs dl>div {
    grid-template-columns: minmax(0, 1fr);
  }

  .costs dd.amount {
    grid-column: 1;
    grid-row: auto;
    text-align: left;
  }
}

.work {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.35rem;
  max-width: 66ch;
}

/* pretty, not balance: balance splits two-line items in the middle and leaves ragged short lines */
.work li {
  text-wrap: pretty;
}

.work li::marker {
  color: var(--accent);
}

.contact {
  align-self: start;
  max-width: 26rem;
  padding: 1.1rem;
  background: var(--sheet);
  border: 1px solid var(--grid-major);
  display: grid;
  gap: 0.6rem;
  align-content: start;
  min-width: 0;
}

.contact .addr {
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  user-select: all;
  overflow-wrap: anywhere;
}

.copy {
  justify-self: start;
  font: inherit;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  border-radius: 2px;
  cursor: pointer;
}

.copy:hover {
  background: var(--accent);
  color: var(--on-accent);
}

.small {
  font-size: 0.9375rem;
  color: var(--ink-2);
}

/* footer */
footer {
  border-top: 1px solid var(--grid-major);
}

footer .wrap {
  padding-block: 2rem 2.5rem;
  display: grid;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--ink-2);
}

.foot-brand {
  color: var(--ink);
  display: inline-flex;
}

.foot-brand svg {
  height: 1.1rem;
  width: auto;
}

footer p {
  max-width: 70ch;
}

.mono {
  font-family: var(--font-mono);
}

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

/* skip link: off screen until it receives keyboard focus */
.skip {
  position: absolute;
  left: 16px;
  top: -10rem;
  z-index: 100;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-mono);
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 2px;
}

.skip:focus {
  top: 0.5rem;
}

main:focus {
  outline: none;
}