@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Warm archival neutrals — chosen, not defaulted to pure grey. */
  --ink: #191713;
  --paper: #fcfbf8;
  --stone: #eeebe3;

  --text-on-ink: #faf8f4;
  --text-muted-on-ink: #a29c90;
  --text-on-paper: #191713;
  --text-muted-on-paper: #5c574d;

  /* Institutional document blue, not startup blue. */
  --signal: #1b4d8e;
  --signal-lift: #8fb3dd;
  --signal-deep: #123561;

  --rule-on-ink: #34302a;
  --rule-on-paper: #d8d3c7;

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --measure: 60ch;
  --shell: 78rem;
  --gutter: clamp(1.5rem, 5vw, 4.5rem);
  --band-pad: clamp(4rem, 9vw, 8rem);
  --col-gap: clamp(2rem, 6vw, 6rem);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--text-on-paper);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 3px solid var(--focus, var(--signal));
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- bands */

.band {
  --bg: var(--paper);
  --fg: var(--text-on-paper);
  --fg-muted: var(--text-muted-on-paper);
  --rule: var(--rule-on-paper);
  --focus: var(--signal);
  background: var(--bg);
  color: var(--fg);
}

.band--ink {
  --bg: var(--ink);
  --fg: var(--text-on-ink);
  --fg-muted: var(--text-muted-on-ink);
  --rule: var(--rule-on-ink);
  --focus: var(--signal-lift);
}

.band--stone {
  --bg: var(--stone);
  --rule: #d5d0c2;
}

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

/* -------------------------------------------------------------- sections */

.section {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem);
  padding-block: var(--band-pad);
}

.section__head {
  align-self: start;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-muted);
  margin: 0 0 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

h2 {
  margin: 0;
  font-size: clamp(1.75rem, 3.4vw, 2.25rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

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

.prose p {
  margin: 0 0 1.15em;
  text-wrap: pretty;
}

.prose p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ hero */

.band--hero .hero {
  padding-block: clamp(4.5rem, 11vw, 9rem) var(--band-pad);
}

.wordmark {
  margin: 0;
  font-size: clamp(3.25rem, 11vw, 5.75rem);
  font-weight: 500;
  letter-spacing: -0.042em;
  line-height: 0.94;
}

.wordmark__legal {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted-on-ink);
  margin-top: 1.4rem;
}

.hero__statement {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  margin-top: clamp(3rem, 8vw, 6rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--rule);
}

.tagline {
  margin: 0;
  font-size: clamp(1.875rem, 4.6vw, 3rem);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.hero__lead {
  margin: 0;
  max-width: 46ch;
  color: var(--text-muted-on-ink);
  text-wrap: pretty;
}

/* ----------------------------------------------------------- commitments */

.commitments {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(2rem, 4vw, 3rem) var(--col-gap);
}

.commitment {
  border-top: 1px solid var(--rule);
  padding-top: 1.25rem;
}

.commitment__label {
  margin: 0 0 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--signal);
}

.commitment h3 {
  margin: 0 0 0.6rem;
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.commitment p:last-child {
  margin: 0;
  font-size: 1rem;
  line-height: 1.58;
  color: var(--fg-muted);
  text-wrap: pretty;
}

/* ---------------------------------------------------------------- clause */

.clause {
  margin: 0;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.75rem, 5vw, 4.5rem);
  margin-bottom: var(--band-pad);
  background: var(--ink);
  color: var(--text-on-ink);
}

.clause p {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(1.5rem, 3.2vw, 2.125rem);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

/* ------------------------------------------------------------------- cta */

.cta {
  display: inline-block;
  margin-top: 2.5rem;
  background: var(--text-on-ink);
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.01em;
  padding: 0.9rem 2rem;
  border: 1px solid var(--text-on-ink);
}

.cta:hover {
  background: transparent;
  color: var(--text-on-ink);
}

@media (prefers-reduced-motion: no-preference) {
  .cta {
    transition: background 120ms linear, color 120ms linear;
  }
}

/* -------------------------------------------------------------- colophon */

.colophon {
  display: grid;
  gap: 2rem var(--col-gap);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.9;
  color: var(--text-muted-on-ink);
}

.colophon p {
  margin: 0;
}

.colophon a {
  color: var(--signal-lift);
}

.colophon__name {
  color: var(--text-on-ink);
}

/* --------------------------------------------------------- wide viewport */

@media (min-width: 60rem) {
  .section {
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
    gap: var(--col-gap);
  }

  /* Engages only where the body column is taller than the heading. */
  .section__head {
    position: sticky;
    top: clamp(2rem, 6vh, 4rem);
  }

  .hero {
    display: grid;
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
    gap: var(--col-gap);
    align-items: start;
  }

  .hero__statement {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .commitments {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* An odd-numbered final commitment would otherwise orphan a column. */
  .commitment:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .commitment:last-child:nth-child(odd) p:last-child {
    max-width: var(--measure);
  }

  .colophon {
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
  }

  .colophon__notes {
    justify-self: end;
    text-align: right;
  }
}

@media (min-width: 60rem) and (max-width: 78rem) {
  .section,
  .hero,
  .colophon {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------ print */

@media print {
  .band,
  .band--ink,
  .clause {
    background: #ffffff !important;
    color: #000000 !important;
    --fg-muted: #333333;
    --rule: #999999;
  }
  .wordmark__legal,
  .colophon,
  .colophon a,
  .hero__lead,
  .commitment__label {
    color: #333333 !important;
  }
  .section__head {
    position: static;
  }
  .clause {
    border: 1px solid #999999;
  }
  .cta {
    background: none !important;
    color: #000000 !important;
    border-color: #000000 !important;
  }
  .section,
  .hero,
  .band--hero .hero {
    padding-block: 1.5rem;
  }
}