:root {
  --bg: #f7f3e9;
  --bg-elevated: #f0ece0;
  --ink: #15130c;
  --ink-soft: #4d4838;
  --ink-faint: #837c68;
  --rule: rgba(21, 19, 12, 0.14);
  --accent: #8a6a24;
  --ok: #4a6741;
  /* Same warm hue as before, roughly half the saturation and lifted in
     lightness, so the band reads as a wash rather than a slab. The centre sits
     within a few steps of the page ground and melts into it. */
  --gold-a: #d8cdaf;
  --gold-b: #e6dfc8;
  --gold-c: #f4f1e6;
  --gold-d: #e8e1cc;
  --gold-e: #dad0b3;
  /* VI Text and VI Display are resolved in fonts.css once a licensed family is
     dropped in. Until then these stacks fall straight through to the system
     grotesques. Nothing else in this file names a commercial font. */
  --sans: "VI Text", "Helvetica Neue", Helvetica, "Nimbus Sans", Arial, sans-serif;
  --display: "VI Display", "Helvetica Neue", Helvetica, "Nimbus Sans", Arial, sans-serif;
  --gutter: clamp(1.5rem, 5vw, 5rem);
  --measure: 38rem;
  --shell: 76rem;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.09;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* nav */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem var(--gutter);
  transition: background 400ms ease, border-color 400ms ease, backdrop-filter 400ms ease;
  border-bottom: 1px solid transparent;
}

.nav.is-scrolled {
  background: rgba(247, 243, 233, 0.78);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--rule);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

/* The plumb mark. Its reference rule is the same hairline the layout uses to
   separate sections, so the mark is made of the page rather than sitting on
   top of it. */
.nav__mark {
  display: block;
  flex: none;
  color: var(--ink);
}

.nav__name {
  font-size: 0.8rem;
  letter-spacing: -0.01em;
  font-weight: 500;
}

.nav__links {
  display: flex;
  gap: 1.9rem;
}

.nav__links a {
  font-size: 0.78rem;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  transition: color 220ms ease;
}

.nav__links a:hover {
  color: var(--ink);
}

/* hero */

.hero {
  position: relative;
  isolation: isolate;
  padding: clamp(7rem, 16vh, 9.5rem) var(--gutter) clamp(3rem, 8vh, 4.5rem);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(
    100deg,
    var(--gold-a) 0%,
    var(--gold-b) 20%,
    var(--gold-c) 50%,
    var(--gold-d) 76%,
    var(--gold-e) 100%
  );
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(247, 243, 233, 0) 58%, var(--bg) 100%);
}

.hero__inner {
  max-width: var(--shell);
  margin: 0 auto;
}

.eyebrow {
  margin: 0 0 1.4rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(21, 19, 12, 0.52);
}

.hero__wordmark {
  --overlap: 0.26em;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.9rem, 4.4vw, 3.9375rem);
  line-height: 0.86;
  letter-spacing: -0.05em;
  color: var(--ink);
}

.hero__word,
.hero__word-inner {
  display: block;
}

.hero__word:nth-child(1) {
  font-weight: 100;
  letter-spacing: -0.03em;
}

/* Applied by main.js when the resolved family has no face lighter than
   Regular, which is every system grotesque outside macOS. Without it the two
   words would render at identical weight and the contrast would vanish. */
.hero__wordmark.is-fallback-weights .hero__word:nth-child(1) {
  font-weight: 400;
  letter-spacing: -0.035em;
}

.hero__wordmark.is-fallback-weights .hero__word:nth-child(2) {
  font-weight: 700;
}

/* The second word settles once on load, then creeps a few more pixels into the
   first as the page is scrolled. --creep is driven from main.js. */
.hero__word:nth-child(2) {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--overlap) * -1);
  font-weight: 400;
  transform: translate3d(0, var(--creep, 0px), 0);
  will-change: transform;
}

.hero__word:nth-child(1) .hero__word-inner {
  animation: word-rise 1100ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
}

.hero__word:nth-child(2) .hero__word-inner {
  animation: word-settle 1700ms cubic-bezier(0.19, 1, 0.22, 1) 420ms both;
}

@keyframes word-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 0.16em, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes word-settle {
  from {
    opacity: 0;
    transform: translate3d(0, 0.62em, 0);
  }
  45% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* essay */

.essay {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(1rem, 3vh, 2rem) var(--gutter) clamp(3rem, 8vh, 5rem);
}

.essay__block {
  max-width: var(--measure);
}

/* One uniform rhythm, whether two paragraphs sit in the same block or in
   adjacent ones. */
.essay__block + .essay__block {
  margin-top: 1.5rem;
}

.essay__body {
  margin: 0 0 1.5rem;
  font-size: 1.06rem;
  line-height: 1.72;
  letter-spacing: -0.008em;
  color: var(--ink-soft);
}

.essay__body:last-child {
  margin-bottom: 0;
}

/* Section headings. The vision statement is argued in parts, and a reader
   scanning for "why now" should be able to find it. */
.essay__heading {
  margin: 0 0 1rem;
  font-size: 1.06rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.essay__block + .essay__block .essay__heading {
  margin-top: 1.4rem;
}

/* The mission, which is one sentence and carries the whole thesis. */
.essay__body--lead {
  font-size: 1.22rem;
  line-height: 1.55;
  color: var(--ink);
}


.eyebrow--dim {
  margin-bottom: 1.1rem;
  color: var(--ink-faint);
}

/* contact */

.contact {
  border-top: 1px solid var(--rule);
  background: linear-gradient(
    100deg,
    rgba(216, 205, 175, 0.5) 0%,
    rgba(244, 241, 230, 0.55) 52%,
    rgba(218, 208, 179, 0.5) 100%
  );
}

.contact__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(3.5rem, 9vh, 6rem) var(--gutter);
}

.contact__heading {
  margin: 0 0 0.9rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.contact__body {
  margin: 0 0 1.6rem;
  max-width: 34rem;
  color: var(--ink-soft);
  font-size: 0.98rem;
  letter-spacing: -0.008em;
}

/* form */

.form__row {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-bottom: 0.5rem;
  margin-bottom: 1.9rem;
}

.form__row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(21, 19, 12, 0.16);
  transform: scaleX(1);
  transform-origin: left;
  transition: background 300ms ease;
}

.form__row:focus-within::after {
  background: rgba(21, 19, 12, 0.55);
}

.form__label {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(21, 19, 12, 0.38);
  transition: color 300ms ease;
}

.form__row:focus-within .form__label {
  color: rgba(21, 19, 12, 0.7);
}

.form__input {
  width: 100%;
  padding: 0.25rem 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.02rem;
  letter-spacing: -0.015em;
}

.form__input:focus {
  outline: none;
}

.form__input::placeholder {
  color: rgba(21, 19, 12, 0.28);
}

.form__input:-webkit-autofill,
.form__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  box-shadow: 0 0 0 100rem var(--bg) inset;
}

.form__textarea {
  resize: vertical;
  min-height: 4.6rem;
  line-height: 1.55;
}

.form__select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(21, 19, 12, 0.55) 50%),
    linear-gradient(135deg, rgba(21, 19, 12, 0.55) 50%, transparent 50%);
  background-position: calc(100% - 0.5rem) 60%, calc(100% - 0.15rem) 60%;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
  padding-right: 1.6rem;
  cursor: pointer;
}

.form__verify {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 0 0 1.6rem;
}

.form__verify-status {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.form__verify[data-state="checking"] .form__verify-status {
  animation: verify-pulse 1100ms ease-in-out infinite;
}

.form__verify[data-state="verified"] .form__verify-status {
  color: var(--accent);
}

.form__verify[data-state="failed"] .form__verify-status {
  text-transform: none;
  letter-spacing: -0.005em;
  color: #7a3319;
}

/* While the search runs the box is held in an indeterminate looking state so
   the tick never claims more than has actually been proved. */
.form__verify[data-state="checking"] .form__check-input:checked + .form__check-box::after {
  opacity: 0.35;
}

@keyframes verify-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

.form__check {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  cursor: pointer;
  user-select: none;
}

.form__check-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.form__check-box {
  position: relative;
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  border: 1px solid rgba(21, 19, 12, 0.3);
  border-radius: 2px;
  transition: border-color 220ms ease, background 220ms ease;
}

.form__check-box::after {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 0.1rem;
  width: 0.28rem;
  height: 0.55rem;
  border: solid var(--gold-c);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(42deg) scale(0.6);
  opacity: 0;
  transition: opacity 180ms ease, transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.form__check:hover .form__check-box {
  border-color: rgba(21, 19, 12, 0.6);
}

.form__check-input:checked + .form__check-box {
  background: var(--ink);
  border-color: var(--ink);
}

.form__check-input:checked + .form__check-box::after {
  opacity: 1;
  transform: rotate(42deg) scale(1);
}

.form__check-input:focus-visible + .form__check-box {
  outline: 1px solid var(--ink);
  outline-offset: 3px;
}

.form__check-label {
  font-size: 0.88rem;
  letter-spacing: -0.008em;
  color: var(--ink-soft);
}

.form__noscript {
  margin: 0 0 1.6rem;
  font-size: 0.85rem;
  color: var(--ink-faint);
}

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

.form__submit {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.4rem;
  padding: 0 0 0.4rem;
  border: none;
  border-bottom: 1px solid rgba(21, 19, 12, 0.3);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: border-color 260ms ease, gap 260ms ease;
}

.form__submit:hover {
  border-bottom-color: var(--ink);
  gap: 0.85rem;
}

.form__submit:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 5px;
}

.form__error {
  margin: 0 0 1.6rem;
  padding: 0 0 0 0.85rem;
  border-left: 1px solid #8c3a1e;
  font-size: 0.88rem;
  letter-spacing: -0.008em;
  color: #7a3319;
}

.form__success {
  margin: 0;
  padding: 1.4rem 0 0;
  border-top: 1px solid rgba(21, 19, 12, 0.22);
  font-size: 1.05rem;
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* docs */

.docs {
  display: grid;
  grid-template-columns: 11rem minmax(0, var(--measure));
  gap: clamp(2rem, 6vw, 5rem);
  max-width: var(--shell);
  margin: 0 auto;
  padding: 8rem var(--gutter) 5rem;
}

.docs__index {
  position: sticky;
  top: 6.5rem;
  align-self: start;
  font-size: 0.8rem;
}

.docs__index ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs__index li {
  padding: 0.3rem 0;
  border-top: 1px solid var(--rule);
}

.docs__index a {
  color: var(--ink-soft);
}

.docs__index a[aria-current="page"] {
  color: var(--ink);
}

.docs__eyebrow,
.docs__updated {
  margin: 0 0 0.75rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.docs__title {
  margin: 0 0 0.4rem;
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.docs__attestation {
  margin: 2.5rem 0 1.5rem;
  font-size: 1.35rem;
  letter-spacing: -0.015em;
}

.docs__split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.75rem;
}

.docs__side {
  padding: 1rem 1.1rem;
  border: 1px solid var(--rule);
  border-left: 2px solid var(--accent);
  background: var(--bg-elevated);
}

.docs__side--private {
  border-left-color: var(--ok);
}

.docs__kind {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
}

.docs__detail {
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  color: var(--ink-faint);
}

.docs__retained {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.docs__lead {
  margin: 1.5rem 0 0;
  color: var(--ink-soft);
}

.docs__section {
  margin-top: 2.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

.docs__section h2 {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.docs__section p {
  margin: 0 0 0.9rem;
  color: var(--ink-soft);
}

.docs__parties {
  display: grid;
  grid-template-columns: 9rem 1fr;
  margin: 0;
  font-size: 0.9rem;
}

.docs__parties dt,
.docs__parties dd {
  margin: 0;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--rule);
}

.docs__parties dd {
  color: var(--ink-soft);
}

.docs__questions {
  margin: 3rem 0 0;
  color: var(--ink-soft);
}

.docs__questions a,
.footer a {
  color: var(--accent);
}

/* footer */

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 1.8rem var(--gutter) 2.2rem;
  border-top: 1px solid var(--rule);
  font-size: 0.75rem;
  letter-spacing: -0.005em;
  color: var(--ink-faint);
}

/* reveal */

/* Content is visible by default. Only a document that has confirmed scripting
   hides it, so a blocked or broken bundle can never leave the page blank. */
.has-js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0ms),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0ms);
}

.has-js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal--d1 { --delay: 0ms; }
.reveal--d2 { --delay: 70ms; }
.reveal--d3 { --delay: 140ms; }
.reveal--d4 { --delay: 210ms; }
.reveal--d5 { --delay: 280ms; }
.reveal--d6 { --delay: 350ms; }

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

  .has-js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero__word-inner,
  .hero__word:nth-child(1) .hero__word-inner,
  .hero__word:nth-child(2) .hero__word-inner {
    animation: none;
  }

  .hero__word:nth-child(2) {
    transform: none;
  }
}

/* responsive */

@media (max-width: 860px) {
      }

@media (max-width: 640px) {
  .nav__name {
    display: none;
  }

  .nav__links {
    gap: 1.2rem;
  }

  .docs {
    grid-template-columns: 1fr;
    padding-top: 6rem;
  }

  .docs__index {
    position: static;
  }

  .essay__block {
    grid-template-columns: 1fr;
    gap: 0;
  }

    }