/* EHM Studio’s one stylesheet: white paper and navy ink, with the logo’s orange under links, set in Archivo.
   Headings run expanded and heavy over body text at normal width. The home page’s four tiles, drawn like the logo,
   are the one ornament, and nothing moves. Light only, on purpose. */

@font-face { font-family: "Archivo"; src: url("/fonts/archivo-wdth.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --paper: #FFFFFF;
  --ink: #18233D;
  --slate: #59627A;
  --mist: #EDF2EF;
  /* The logo’s orange: 3.6:1 on white, 3.2:1 on mist. Enough for underlines and the focus ring, not for text. */
  --orange: #D66742;
  /* Hairlines between rows and under the header: mist vanishes on white and ink is too loud. */
  --rule: #CFD8D3;

  /* Bringhurst’s scale; the hero h1 takes the 72–80 step. */
  --fs-15: 0.9375rem;
  --fs-18: 1.125rem;
  --fs-21: 1.3125rem;
  --fs-24: 1.5rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;

  --gutter: 1.5rem;
  --section-space: clamp(3.5rem, 2.5rem + 3vw, 5rem);
}

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

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

/* A column, so the footer sits at the bottom of short pages. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: var(--fs-18);
  line-height: 1.6;
}

main {
  flex: 1;
}

h1,
h2,
h3,
p,
dl,
dd {
  margin: 0;
}

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

h1 {
  font-size: clamp(2.75rem, 1.6rem + 5vw, 5rem);
  font-stretch: 118%;
  font-weight: 760;
  letter-spacing: -0.02em;
  line-height: 1.02;
}

h2 {
  font-size: var(--fs-36);
  font-stretch: 112%;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

h3 {
  font-size: var(--fs-21);
  font-stretch: 108%;
  font-weight: 650;
  line-height: 1.25;
}

a {
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

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

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

/* An address moves to the next line whole rather than breaking at its hyphen. */
a[href^="mailto:"] {
  white-space: nowrap;
}

.wrap {
  width: min(72rem, 100% - 2.5rem);
  margin-inline: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The logo is the favicon itself: three rising bars on a navy tile. */
.mark {
  display: block;
  flex: none;
  width: 28px;
  height: 28px;
}

/* Header. No scripts means no menu button: below the brand’s width the nav wraps onto its own lines. */

.site-header {
  border-bottom: 1px solid var(--rule);
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2.5rem;
  padding-block: 1.25rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--ink);
  font-size: var(--fs-21);
  font-stretch: 112%;
  font-weight: 720;
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

/* The tight gap fits all three links on one line from a 375px phone up. */
.site-header ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header nav a {
  display: inline-block;
  padding-block: 0.25rem;
  white-space: nowrap;
}

/* Home page */

.hero {
  padding-block: clamp(3.5rem, 2rem + 4vw, 5rem) clamp(3rem, 2rem + 2vw, 4rem);
}

/* Breaks the headline into three lines on wide screens. */
.hero h1 {
  max-width: 10.5em;
}

/* On the smallest phones a touch narrower, so “run our own” holds one line and “build” isn’t left alone. */
@media (max-width: 22.4rem) {
  .hero h1 {
    font-stretch: 112%;
  }
}

.lead {
  max-width: 34rem;
  margin-top: 1.5rem;
  color: var(--slate);
  font-size: var(--fs-21);
  line-height: 1.5;
}

/* What we make: four small tiles in the logo’s own style, on the mist band. */

.make-band {
  padding-block: clamp(3rem, 2rem + 2vw, 4rem) clamp(3rem, 2rem + 3vw, 4.5rem);
  background: var(--mist);
}

.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tile {
  display: block;
  width: 56px;
  height: 56px;
}

/* On a 320px screen the cells are about 128px wide, so captions start at body size and normal width: “automations”
   fits whole. */
.tiles h3 {
  margin-top: 1.25rem;
  font-size: var(--fs-18);
  font-stretch: 100%;
}

.tiles p {
  margin-top: 0.375rem;
  color: var(--slate);
  font-size: var(--fs-15);
  line-height: 1.5;
}

/* Rows: the heading takes the left four of twelve columns and the content the right eight. */

.row {
  padding-block: var(--section-space);
}

.row + .row {
  border-top: 1px solid var(--rule);
}

.row h2 {
  margin-bottom: 2rem;
}

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

.principles p {
  margin-top: 0.5rem;
}

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

.terms {
  margin-top: 2rem;
}

.terms > div {
  padding-block: 1.25rem;
  border-top: 1px solid var(--rule);
}

.terms dt {
  font-stretch: 108%;
  font-weight: 650;
}

.terms dd {
  max-width: 62ch;
  margin-top: 0.25rem;
}

.terms dd p + p {
  margin-top: 0.5rem;
}

.contact > div + div {
  margin-top: 1.75rem;
}

.contact dt {
  color: var(--slate);
}

/* The address is sized to its column, so the longest one fits whole on a 320px screen. */
.contact dd {
  margin-top: 0.25rem;
  container-type: inline-size;
}

.contact a {
  font-size: 1.3rem;
  font-size: clamp(1.3rem, 7.4cqi, var(--fs-36));
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* Footer */

.site-footer {
  padding-block: 3rem 3.5rem;
  background: var(--mist);
  color: var(--slate);
  font-size: var(--fs-15);
  line-height: 1.5;
}

.site-footer .mark {
  margin-bottom: 1.25rem;
}

.legal-name {
  color: var(--ink);
  font-stretch: 108%;
  font-weight: 650;
}

.site-footer nav {
  margin-block: 1.5rem 0.75rem;
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer nav a {
  white-space: nowrap;
}

/* Policy pages and the 404: one left-aligned column of text. */

main.prose {
  padding-block: clamp(3rem, 2rem + 4vw, 5rem) var(--section-space);
}

.prose > * {
  max-width: 66ch;
}

.prose > * + * {
  margin-top: 1rem;
}

.prose h1 {
  font-size: clamp(2rem, 1.25rem + 3.5vw, var(--fs-48));
  line-height: 1.05;
}

/* Steps down with the h1 on phones, so a section heading never outranks the page title. */
.prose > h2 {
  margin-top: 3rem;
  font-size: clamp(var(--fs-24), 0.75rem + 3.75vw, var(--fs-36));
}

.prose > .updated {
  margin-top: 0.75rem;
  color: var(--slate);
  font-size: var(--fs-15);
}

.prose > .updated + * {
  margin-top: 2rem;
}

@media (min-width: 40rem) {
  .site-header ul {
    column-gap: 1.75rem;
  }

  .tiles h3 {
    font-size: var(--fs-21);
    font-stretch: 108%;
  }

  .principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 3rem;
  }

  .terms > div,
  .contact > div {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 5fr);
    column-gap: var(--gutter);
  }

  .contact > div {
    align-items: baseline;
  }

  .terms dd,
  .contact dd {
    margin-top: 0;
  }
}

@media (min-width: 64rem) {
  .tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--gutter);
  }

  .tiles h3,
  .tiles p {
    padding-inline-end: 2rem;
  }

  .row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: start;
  }

  .row h2 {
    grid-column: 1 / span 4;
    margin-bottom: 0;
  }

  .row-body {
    grid-column: 5 / -1;
  }

  .site-footer .wrap {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: baseline;
  }

  .site-footer .wrap > * {
    grid-column: 1 / span 4;
  }

  .site-footer .wrap > nav {
    grid-column: 5 / -1;
    grid-row: 2;
    margin: 0;
  }

  .site-footer .wrap > p:last-child {
    grid-column: 5 / -1;
    grid-row: 3;
  }
}