:root {
  color-scheme: light dark;
  --paper: #f2efe7;
  --paper-raised: #e7e3d9;
  --ink: #101310;
  --muted: #59605a;
  --line: #a4a9a2;
  --accent: #137a49;
  --accent-strong: #095f35;
  --on-accent: #f4f2eb;
  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }

html {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  scroll-behavior: smooth;
}

body { margin: 0; }

a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

img { display: block; max-width: 100%; }

.page-grid {
  width: min(1400px, calc(100% - 48px));
  margin-inline: auto;
}

.site-header {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  border-bottom: 1px solid var(--ink);
}

.brand {
  flex: 0 0 auto;
  font: 600 clamp(1.6rem, 3vw, 2.35rem)/1 var(--font-mono);
  letter-spacing: -.08em;
}

.brand span { color: var(--accent); }

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 34px);
  white-space: nowrap;
  font: 500 clamp(.68rem, .82vw, .8rem)/1 var(--font-mono);
  text-transform: uppercase;
}

.site-nav a,
.text-link { text-underline-offset: 5px; }
.site-nav a:hover,
.text-link:hover { color: var(--accent-strong); text-decoration: underline; }
.site-nav a[aria-current="page"] { color: var(--accent-strong); }

.hero {
  min-height: min(680px, calc(100dvh - 72px));
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  border-bottom: 1px solid var(--ink);
}

.hero-copy {
  grid-column: 1 / span 7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 7vh, 76px) 7vw clamp(48px, 7vh, 76px) 0;
}

.eyebrow {
  margin: 0 0 22px;
  color: var(--accent-strong);
  font: 600 .72rem/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 13ch;
  margin: 0;
  font-size: clamp(4.2rem, 7vw, 7.2rem);
  font-weight: 700;
  letter-spacing: -.075em;
  line-height: .84;
}

.hero-line { display: block; }

.hero-copy > p:not(.eyebrow) {
  max-width: 28ch;
  margin: 38px 0 0;
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  letter-spacing: -.025em;
  line-height: 1.18;
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 32px;
}

.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  background: var(--ink);
  color: var(--paper);
  font: 600 .8rem/1 var(--font-mono);
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 140ms ease, background-color 140ms ease;
}

.button:hover { background: var(--accent-strong); color: var(--on-accent); }
.button:active { transform: translateY(1px); }

.text-link {
  width: fit-content;
  color: var(--accent-strong);
  font: 600 .8rem/1.35 var(--font-mono);
  text-transform: uppercase;
}

.hero-visual {
  grid-column: 8 / -1;
  min-width: 0;
  margin: 0;
  border-left: 1px solid var(--ink);
  overflow: hidden;
}

.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-visual.contain {
  display: grid;
  place-items: center;
  padding: clamp(24px, 4vw, 64px);
  background: var(--paper-raised);
}

.hero-visual.contain img { height: auto; max-height: 100%; object-fit: contain; }

.credibility {
  display: grid;
  grid-template-columns: 1.35fr repeat(4, 1fr);
  border-bottom: 1px solid var(--ink);
}

.credibility > * {
  min-width: 0;
  margin: 0;
  padding: 21px;
  border-left: 1px solid var(--line);
  font: 500 .75rem/1.4 var(--font-mono);
}

.credibility > :first-child {
  border-left: 0;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  text-transform: uppercase;
}

.offer-index { padding-block: clamp(70px, 10vw, 130px); border-bottom: 1px solid var(--ink); }

.offer-index > h2,
.section-heading h2,
.contact h2 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(2.8rem, 5.6vw, 5.8rem);
  letter-spacing: -.065em;
  line-height: .9;
}

.offer-list { margin-top: 64px; }

.offer-row {
  display: grid;
  grid-template-columns: 1.15fr 1.25fr .8fr;
  gap: clamp(24px, 5vw, 72px);
  align-items: start;
  padding: 38px 0;
  border-top: 1px solid var(--ink);
  transition: color 160ms ease;
}

.offer-row:last-child { border-bottom: 1px solid var(--ink); }
.offer-row:hover { color: var(--accent-strong); }

.offer-row h3 {
  margin: 0;
  font-size: clamp(2rem, 4.3vw, 4.3rem);
  letter-spacing: -.055em;
  line-height: .95;
}

.offer-row p { max-width: 38ch; margin: 4px 0 0; color: var(--muted); font-size: 1.05rem; line-height: 1.55; }
.offer-row:hover p { color: inherit; }
.offer-row .text-link { justify-self: end; margin-top: 8px; }

.proof-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding-block: 24px 88px;
  border-bottom: 1px solid var(--ink);
}

.proof-card { position: relative; min-height: 520px; overflow: hidden; border: 1px solid var(--ink); }
.proof-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms cubic-bezier(.16, 1, .3, 1); }
.proof-card:hover img { transform: scale(1.015); }
.proof-card-copy { position: absolute; inset: auto 0 0; padding: 24px; background: color-mix(in srgb, var(--paper) 93%, transparent); border-top: 1px solid var(--ink); }
.proof-card h3 { margin: 0 0 8px; font-size: clamp(1.7rem, 3vw, 3rem); letter-spacing: -.04em; }
.proof-card p { max-width: 42ch; margin: 0; color: var(--muted); line-height: 1.5; }

.section { padding-block: clamp(72px, 10vw, 130px); border-bottom: 1px solid var(--ink); }
.section-heading { max-width: 760px; }
.section-heading p { max-width: 50ch; margin: 28px 0 0; color: var(--muted); font-size: 1.12rem; line-height: 1.6; }

.case-list { margin-top: 70px; }
.case {
  display: grid;
  grid-template-columns: minmax(180px, .7fr) minmax(0, 1.3fr);
  gap: clamp(30px, 7vw, 100px);
  padding: 42px 0;
  border-top: 1px solid var(--ink);
}

.case:last-child { border-bottom: 1px solid var(--ink); }
.case h3 { margin: 0; font-size: clamp(2rem, 4vw, 4rem); letter-spacing: -.055em; line-height: .95; }
.case-body p { max-width: 62ch; margin: 0 0 18px; font-size: 1.08rem; line-height: 1.65; }
.case-body p:last-child { margin-bottom: 0; }
.case-language { color: var(--accent-strong); font: 500 .82rem/1.6 var(--font-mono); }

.principle-grid {
  display: grid;
  grid-template-columns: 1.45fr .85fr .85fr;
  gap: 18px;
  margin-top: 62px;
}

.principle {
  min-height: 260px;
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid var(--ink);
}

.principle:first-child { background: var(--accent-strong); color: var(--on-accent); }
.principle h3 { margin: 0 0 24px; font-size: clamp(1.6rem, 2.8vw, 2.8rem); letter-spacing: -.04em; }
.principle p { max-width: 36ch; margin: 0; line-height: 1.58; }

.process {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(50px, 10vw, 150px);
}

.process-list { margin: 0; padding: 0; list-style: none; }
.process-list li { padding: 24px 0; border-bottom: 1px solid var(--line); font-size: clamp(1.25rem, 2.2vw, 2rem); line-height: 1.25; }
.process-list strong { display: block; margin-bottom: 8px; }
.process-list span { color: var(--muted); font-size: 1rem; line-height: 1.55; }

.app-proof {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 18px;
  padding-block: 24px 88px;
  border-bottom: 1px solid var(--ink);
}

.app-proof figure { min-width: 0; margin: 0; border: 1px solid var(--ink); background: var(--paper-raised); overflow: hidden; }
.app-proof img { width: 100%; height: 100%; min-height: 430px; object-fit: cover; }
.app-proof .icon-proof img { padding: clamp(42px, 7vw, 100px); object-fit: contain; }
.app-proof figcaption { padding: 20px; border-top: 1px solid var(--ink); font: 500 .78rem/1.5 var(--font-mono); }
.app-proof .app-note { display: flex; flex-direction: column; justify-content: space-between; padding: 30px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); }
.app-note h2 { margin: 0; font-size: clamp(2.4rem, 4vw, 4.5rem); letter-spacing: -.06em; line-height: .92; }
.app-note p { margin: 32px 0 0; font-size: 1.05rem; line-height: 1.6; }

.build-page .hero h1 { max-width: 11ch; }
.build-page .hero-copy > p:not(.eyebrow) { max-width: 31ch; }

.build-standard {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  gap: clamp(56px, 9vw, 140px);
}

.build-standard-intro { position: sticky; top: 36px; align-self: start; }

.build-standard h2,
.scale-statement h2,
.fit-intro h2 {
  margin: 0;
  font-size: clamp(3rem, 5.8vw, 6.2rem);
  letter-spacing: -.07em;
  line-height: .88;
}

.build-standard-intro > p:last-child,
.scale-statement > p,
.fit-intro > p:last-child {
  max-width: 48ch;
  margin: 30px 0 0;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.65;
}

.direction-ledger { border-top: 1px solid var(--ink); }

.direction-ledger article {
  display: grid;
  grid-template-columns: 80px minmax(190px, .8fr) minmax(240px, 1.2fr);
  gap: clamp(18px, 3vw, 40px);
  align-items: baseline;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}

.direction-ledger article > p {
  margin: 0;
  color: var(--accent-strong);
  font: 600 .7rem/1.4 var(--font-mono);
  text-transform: uppercase;
}

.direction-ledger h3 {
  margin: 0;
  font-size: clamp(1.55rem, 2.6vw, 2.75rem);
  letter-spacing: -.045em;
  line-height: 1;
}

.direction-ledger span { color: var(--muted); line-height: 1.55; }

.build-scale {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr);
  gap: clamp(58px, 10vw, 150px);
}

.scale-statement h2 { max-width: 12ch; }
.scale-statement > p { max-width: 56ch; }

.scale-numbers {
  align-self: start;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.scale-numbers > div { padding: clamp(28px, 4vw, 50px); }
.scale-numbers > div + div { border-top: 1px solid var(--paper); }

.scale-numbers strong {
  display: block;
  font-size: clamp(4.5rem, 9vw, 8.5rem);
  letter-spacing: -.085em;
  line-height: .78;
}

.scale-numbers span {
  display: block;
  max-width: 28ch;
  margin: 25px 0 22px;
  font: 500 .78rem/1.5 var(--font-mono);
  text-transform: uppercase;
}

.scale-numbers .source-link { color: inherit; }

.build-details .section-heading { max-width: 840px; }
.build-details .section-heading .eyebrow,
.build-week .section-heading .eyebrow { margin-bottom: 22px; }

.build-case {
  min-width: 0;
  border: 1px solid var(--ink);
  background: var(--paper-raised);
}

.build-case-wide {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(330px, .6fr);
  min-height: 580px;
  margin-top: clamp(58px, 8vw, 96px);
}

.build-case figure { min-width: 0; margin: 0; overflow: hidden; background: var(--paper); }
.build-case-wide figure { border-right: 1px solid var(--ink); }

.build-case img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 350ms cubic-bezier(.16, 1, .3, 1);
}

.build-case figure:hover img { transform: scale(1.012); }

.build-case-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(28px, 4vw, 50px);
}

.build-case-copy h3 {
  margin: 0;
  font-size: clamp(2rem, 3.7vw, 4.4rem);
  letter-spacing: -.06em;
  line-height: .92;
}

.build-case-copy > p:not(.case-mode) {
  margin: 28px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.build-case-copy .source-link { margin-top: 28px; }
.build-case-copy .source-links { margin-top: 28px; }
.build-case-copy .source-links .source-link { margin-top: 0; }

.build-case-copy .build-case-proof {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--ink);
}

.build-case-proof strong {
  font-size: clamp(3.8rem, 6vw, 6.5rem);
  letter-spacing: -.08em;
  line-height: .72;
}

.build-case-proof span {
  max-width: 16ch;
  font: 600 .7rem/1.4 var(--font-mono);
  text-transform: uppercase;
}

.build-case-pair {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 18px;
  margin-top: 18px;
}

.build-case-pair .build-case { display: grid; grid-template-rows: minmax(330px, 1fr) auto; }
.build-case-pair figure { border-bottom: 1px solid var(--ink); }
.build-case-contain { display: grid; place-items: center; padding: clamp(34px, 5vw, 74px); }
.build-case-contain img { height: auto; max-height: 390px; object-fit: contain; }

.build-week {
  display: grid;
  grid-template-columns: minmax(300px, .74fr) minmax(0, 1.26fr);
  gap: clamp(58px, 10vw, 150px);
}

.week-list { margin: 0; padding: 0; border-top: 1px solid var(--ink); list-style: none; }

.week-list li {
  display: grid;
  grid-template-columns: minmax(100px, .35fr) minmax(0, 1.65fr);
  gap: clamp(26px, 5vw, 64px);
  padding: 29px 0 31px;
  border-bottom: 1px solid var(--line);
}

.week-list li > p {
  margin: 5px 0 0;
  color: var(--accent-strong);
  font: 600 .72rem/1.4 var(--font-mono);
  text-transform: uppercase;
}

.week-list h3 {
  margin: 0 0 9px;
  font-size: clamp(1.65rem, 2.7vw, 2.9rem);
  letter-spacing: -.045em;
  line-height: 1;
}

.week-list span { display: block; max-width: 48ch; color: var(--muted); line-height: 1.55; }

.build-fit {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(58px, 9vw, 130px);
}

.fit-intro h2 { max-width: 12ch; }
.fit-columns { display: grid; grid-template-columns: 1fr 1fr; align-self: start; border: 1px solid var(--ink); }
.fit-columns article { min-width: 0; padding: clamp(26px, 3.5vw, 42px); }
.fit-columns article + article { border-left: 1px solid var(--ink); background: var(--paper-raised); }
.fit-columns h3 { margin: 0; font: 600 .76rem/1.4 var(--font-mono); text-transform: uppercase; }
.fit-columns ul { margin: 28px 0 0; padding: 0; list-style: none; }
.fit-columns li { padding: 17px 0; border-top: 1px solid var(--line); line-height: 1.45; }
.fit-columns li:last-child { padding-bottom: 0; }

.build-page .contact > div { min-width: 0; }
.build-page .contact .eyebrow { margin-bottom: 22px; }

.naming-page code { font-family: var(--font-mono); font-size: .92em; }

.homebrew-proof .section-heading { max-width: 900px; }

.homebrew-story {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(44px, 8vw, 120px);
  align-items: start;
  margin-top: clamp(54px, 8vw, 92px);
}

.homebrew-copy h3 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(2.1rem, 4vw, 4.2rem);
  letter-spacing: -.055em;
  line-height: .94;
}

.homebrew-copy > p {
  max-width: 46ch;
  margin: 30px 0 0;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.65;
}

.homebrew-copy blockquote {
  max-width: 46ch;
  margin: 38px 0 32px;
  padding-left: 22px;
  border-left: 4px solid var(--accent-strong);
}

.homebrew-copy blockquote p {
  margin: 0 0 14px;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.35;
}

.homebrew-copy cite {
  font: normal 500 .72rem/1.5 var(--font-mono);
  text-transform: uppercase;
}

.homebrew-copy cite a:hover,
.source-link:hover,
.archive-row a:hover { color: var(--accent-strong); }

.source-link {
  display: inline-block;
  color: var(--accent-strong);
  font: 600 .75rem/1.45 var(--font-mono);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-transform: uppercase;
}

.source-links { display: flex; flex-wrap: wrap; gap: 16px 24px; }

.homebrew-language {
  border: 1px solid var(--ink);
  background: var(--paper-raised);
}

.commit-line {
  margin: 0;
  padding: 18px 22px;
  border-bottom: 1px solid var(--ink);
  color: var(--accent-strong);
  font: 600 .73rem/1.45 var(--font-mono);
}

.historic-path {
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  margin: 0;
  padding: clamp(26px, 4vw, 48px);
  overflow-wrap: anywhere;
  font: 500 clamp(1.65rem, 3.6vw, 3.8rem)/1.04 var(--font-mono);
  letter-spacing: -.055em;
}

.historic-path span { color: var(--accent-strong); }
.historic-path code { font: inherit; }

.homebrew-language dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  border-top: 1px solid var(--ink);
}

.homebrew-language dl div {
  min-width: 0;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
}

.homebrew-language dl div:nth-child(odd) { border-right: 1px solid var(--line); }
.homebrew-language dl div:nth-last-child(-n + 2) { border-bottom: 0; }
.homebrew-language dt { font: 600 1rem/1.25 var(--font-mono); }
.homebrew-language dd { margin: 7px 0 0; color: var(--muted); font-size: .88rem; line-height: 1.4; }

.naming-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(300px, .62fr);
  min-height: 570px;
  margin-top: clamp(58px, 8vw, 94px);
  border: 1px solid var(--ink);
}

.showcase-image {
  min-width: 0;
  min-height: 460px;
  overflow: hidden;
  border-right: 1px solid var(--ink);
  background: var(--paper-raised);
}

.showcase-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 350ms cubic-bezier(.16, 1, .3, 1);
}

.showcase-image:hover img { transform: scale(1.012); }

.showcase-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(28px, 4vw, 52px);
}

.case-mode {
  margin: 0 0 20px;
  color: var(--accent-strong);
  font: 600 .72rem/1.45 var(--font-mono);
  text-transform: uppercase;
}

.showcase-copy h3,
.name-case h3 {
  margin: 0;
  font-size: clamp(2.35rem, 4.6vw, 5.1rem);
  letter-spacing: -.065em;
  line-height: .9;
}

.showcase-copy > p:not(.case-mode),
.name-case-copy > p:not(.case-mode) {
  margin: 30px 0 0;
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.65;
}

.showcase-copy .source-link,
.name-case-copy .source-link { margin-top: 30px; }

.naming-showcase-pmm {
  grid-template-columns: minmax(300px, .62fr) minmax(0, 1.38fr);
  margin-top: 18px;
}

.naming-showcase-pmm .showcase-image {
  order: 2;
  border-right: 0;
  border-left: 1px solid var(--ink);
}

.naming-pair {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr);
  gap: 18px;
  margin-top: 18px;
}

.name-case {
  min-width: 0;
  border: 1px solid var(--ink);
  background: var(--paper-raised);
}

.name-case-image {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--ink);
}

.name-case-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 350ms cubic-bezier(.16, 1, .3, 1);
}

.name-case-image:hover img { transform: scale(1.012); }
.name-case-copy { padding: clamp(28px, 4vw, 46px); }

.promisekit-wordmark {
  min-height: 270px;
  display: flex;
  align-items: flex-end;
  padding: clamp(24px, 3.5vw, 42px);
  overflow: hidden;
  border-bottom: 1px solid var(--ink);
  background: var(--accent-strong);
  color: var(--on-accent);
  font-size: clamp(3.2rem, 6.8vw, 7.2rem);
  font-weight: 700;
  letter-spacing: -.085em;
  line-height: .78;
}

.promisekit-wordmark span { font-weight: 300; }

.archive-groups {
  margin-top: clamp(48px, 7vw, 76px);
  border-top: 1px solid var(--ink);
}

.archive-row {
  display: grid;
  grid-template-columns: minmax(180px, .42fr) minmax(0, 1.58fr);
  gap: clamp(30px, 7vw, 100px);
  align-items: baseline;
  padding: 34px 0;
  border-bottom: 1px solid var(--line);
}

.archive-row h3 { margin: 0; font-size: 1rem; line-height: 1.4; }

.archive-row p {
  margin: 0;
  font-size: clamp(1.45rem, 3vw, 3.2rem);
  letter-spacing: -.045em;
  line-height: 1.22;
}

.archive-row a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

.naming-engagement {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: clamp(50px, 10vw, 150px);
}

.engagement-copy h2 {
  max-width: 10ch;
  margin: 0;
  font-size: clamp(3.2rem, 6vw, 6.4rem);
  letter-spacing: -.07em;
  line-height: .88;
}

.engagement-copy p {
  max-width: 48ch;
  margin: 30px 0 0;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.65;
}

.engagement-brief {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 42px;
  padding: clamp(26px, 4vw, 44px);
  border: 1px solid var(--ink);
  background: var(--paper-raised);
}

.engagement-brief dl { margin: 0; }
.engagement-brief dl div { padding: 22px 0; border-bottom: 1px solid var(--line); }
.engagement-brief dl div:first-child { padding-top: 0; }
.engagement-brief dt { font: 600 .75rem/1.4 var(--font-mono); text-transform: uppercase; }
.engagement-brief dd { margin: 10px 0 0; color: var(--muted); line-height: 1.55; }
.engagement-brief .button { align-self: flex-start; }

.contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  padding-block: clamp(72px, 9vw, 110px);
}

.contact h2 { max-width: 13ch; }

.site-footer {
  min-height: 110px;
  display: flex;
  justify-content: space-between;
  gap: 28px;
  padding-block: 30px;
  border-top: 1px solid var(--ink);
  font: 500 .76rem/1.6 var(--font-mono);
  text-transform: uppercase;
}

.site-footer p { margin: 0; }
.site-footer div { display: flex; gap: 24px; }
.site-footer a:hover { color: var(--accent-strong); text-decoration: underline; }

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: enter 600ms cubic-bezier(.16, 1, .3, 1) both; }
  .hero-copy > :nth-child(2) { animation-delay: 80ms; }
  .hero-copy > :nth-child(3) { animation-delay: 150ms; }
  .hero-copy > :nth-child(4) { animation-delay: 220ms; }
}

@keyframes enter {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #111411;
    --paper-raised: #1a1e1a;
    --ink: #e9e7df;
    --muted: #afb6af;
    --line: #505750;
    --accent: #61b98b;
    --accent-strong: #7bc99d;
    --on-accent: #0d1a12;
  }

  .button { color: #111411; }
  .principle:first-child { background: #285d40; color: #f1f0e9; }
  .app-proof .app-note { background: #e9e7df; color: #111411; }
  .scale-numbers { background: #e9e7df; color: #111411; }
  .scale-numbers > div + div { border-top-color: #111411; }
}

@media (max-width: 1000px) {
  .site-header { align-items: flex-start; flex-direction: column; padding-block: 18px; }
  .site-nav { width: 100%; overflow-x: auto; padding-bottom: 6px; }
  .hero { min-height: calc(100dvh - 116px); }
  .hero h1 { font-size: clamp(4rem, 7vw, 5.5rem); }
  .credibility { grid-template-columns: repeat(2, 1fr); }
  .credibility > :first-child { grid-column: 1 / -1; }
  .offer-row { grid-template-columns: 1fr 1fr; }
  .offer-row .text-link { grid-column: 2; justify-self: start; }
  .principle-grid { grid-template-columns: 1.4fr 1fr; }
  .principle:last-child { grid-column: 1 / -1; }
  .homebrew-story { gap: 44px; }
  .naming-showcase { grid-template-columns: minmax(0, 1fr) minmax(280px, .7fr); }
  .naming-showcase-pmm { grid-template-columns: minmax(280px, .7fr) minmax(0, 1fr); }
  .archive-row { grid-template-columns: 150px minmax(0, 1fr); }
  .naming-engagement { gap: 52px; }
  .build-standard,
  .build-scale,
  .build-week,
  .build-fit { gap: 58px; }
  .direction-ledger article { grid-template-columns: 68px minmax(170px, .8fr) minmax(200px, 1.2fr); }
  .build-case-wide { grid-template-columns: minmax(0, 1fr) minmax(280px, .7fr); }
  .fit-columns { grid-template-columns: 1fr; }
  .fit-columns article + article { border-top: 1px solid var(--ink); border-left: 0; }
}

@media (max-width: 720px) {
  .page-grid { width: min(100% - 28px, 1400px); }
  .site-header { min-height: 0; }
  .hero { display: flex; min-height: 0; flex-direction: column; }
  .hero-copy { order: 2; padding: 32px 0 36px; }
  .hero h1 { font-size: clamp(3.5rem, 19vw, 5.2rem); }
  .hero-copy > p:not(.eyebrow) { margin-top: 26px; }
  .hero-actions { margin-top: 24px; }
  .hero-visual { height: 240px; border: 0; border-bottom: 1px solid var(--ink); }
  .hero-visual.contain { padding: 26px; }
  .hero-visual img { height: 240px; }
  .credibility { grid-template-columns: 1fr; }
  .credibility > :first-child { grid-column: auto; }
  .credibility > * { border-left: 0; border-top: 1px solid var(--line); }
  .offer-list { margin-top: 44px; }
  .offer-row,
  .proof-grid,
  .case,
  .principle-grid,
  .process,
  .app-proof,
  .homebrew-story,
  .naming-showcase,
  .naming-pair,
  .archive-row,
  .naming-engagement,
  .build-standard,
  .build-scale,
  .build-case-wide,
  .build-case-pair,
  .build-week,
  .build-fit { grid-template-columns: 1fr; }
  .offer-row { gap: 18px; }
  .offer-row .text-link { grid-column: auto; justify-self: start; }
  .proof-grid,
  .app-proof { padding-bottom: 54px; }
  .proof-card { min-height: 390px; }
  .proof-card-copy { position: relative; }
  .section { padding-block: 66px; }
  .case-list { margin-top: 42px; }
  .case { gap: 24px; padding: 34px 0; }
  .principle:last-child { grid-column: auto; }
  .app-proof img { min-height: 320px; }
  .homebrew-story { gap: 42px; }
  .historic-path { min-height: 180px; }
  .homebrew-language dl { grid-template-columns: 1fr; }
  .homebrew-language dl div:nth-child(odd) { border-right: 0; }
  .homebrew-language dl div:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .naming-showcase { min-height: 0; }
  .showcase-image { min-height: 0; aspect-ratio: 4 / 3; border-right: 0; border-bottom: 1px solid var(--ink); }
  .naming-showcase-pmm .showcase-image { order: 0; border-left: 0; border-bottom: 1px solid var(--ink); }
  .naming-pair { gap: 14px; margin-top: 14px; }
  .naming-showcase-pmm { margin-top: 14px; }
  .promisekit-wordmark { min-height: 210px; }
  .archive-row { gap: 14px; padding: 28px 0; }
  .engagement-brief { min-height: 0; }
  .build-standard-intro { position: static; }
  .direction-ledger article { grid-template-columns: 62px minmax(0, 1fr); gap: 10px 20px; }
  .direction-ledger article span { grid-column: 2; }
  .build-case-wide { min-height: 0; }
  .build-case-wide figure { aspect-ratio: 4 / 3; border-right: 0; border-bottom: 1px solid var(--ink); }
  .build-case-pair { gap: 14px; margin-top: 14px; }
  .build-case-pair .build-case { grid-template-rows: 250px auto; }
  .build-case-contain { padding: 28px; }
  .week-list li { grid-template-columns: 80px minmax(0, 1fr); gap: 18px; }
  .contact { align-items: flex-start; flex-direction: column; }
  .site-footer { flex-direction: column; }
}

@media (min-width: 721px) {
  .hero-line { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}