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

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

:root { --page-bg: var(--grey-background-100); }

/* A project page sits on primary/50, a shade off the grey the rest of the site
   uses and a shade off the white of its own sheet — which is what lets the
   sheet read as a sheet without a border or a shadow saying so. */
body.is-project { --page-bg: var(--primary-50); }

body {
  margin: 0;
  /* The page's own colour, per page rather than per site: grey everywhere,
     white on a project (140:17213). Written as a variable so the value lives
     in one place and the transition between two pages has something to move
     between rather than a hard swap. */
  background: var(--page-bg);
  transition: background-color var(--page-bg-travel, 0ms) var(--transition-ease, ease);
  color: var(--headline-ink);
  font-family: var(--font-body);
  font-weight: var(--weight-book);
  font-size: var(--body-16-size);
  line-height: var(--body-16-line);
  -webkit-font-smoothing: antialiased;
}

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

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

/* The single centred column the whole page is built on */
.column {
  width: var(--column);
  margin: 0 auto;
  position: relative;
}

/* Section head-title: "Testimonials", "Experiences", … */
.headtitle {
  margin: 0;
  height: 20px;
  display: flex;
  align-items: center;
  font-family: var(--font-headings);
  font-weight: var(--weight-book);
  font-size: var(--h4-size);
  line-height: var(--h4-line);
  color: var(--headtitle-ink);
}

@media (max-width: 700px) {
  :root { --column: 100%; }
  .column { padding: 0 var(--space-16); }
}

/* Available to screen readers and to the machines that read this site — an ATS
   parser, a search crawler, an LLM summarising the page — but taking no space.
   Used for section headings the design does not show but the structure needs. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}