/* Passo Norte: the design system's dark theme. Square corners, thin borders,
   flat fills, no shadows but the focus ring. Space is in steps of 8px.
   Space Grotesk for headlines, buttons and the menu; Bricolage Grotesque for reading.
   When this file changes, bump ?v= in index.html and 404.html: static files
   reach browsers with a 4-hour cache, and new HTML on an old stylesheet breaks. */

@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/SpaceGrotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/BricolageGrotesque-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/BricolageGrotesque-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #0a0a0a;
  --surface: #171614;
  --line: #2e2b27;
  --ink: #f1eadc;
  --ink-muted: #a8a194;
  --accent: #1f3fc8;
  --accent-text: #5f79e6;
  --on-accent: #f1eadc;
  --focus-ring: 0 0 0 2px #0a0a0a, 0 0 0 4px #5f79e6;
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-text: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --gutter: 32px;
  --section: 64px;
}

@media (min-width: 900px) {
  :root { --gutter: 64px; }
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
}

h1, h2, h3, p, dl, dd { margin: 0; }
img { display: block; max-width: 100%; height: auto; }

.wrap {
  width: min(100% - 2 * var(--gutter), 1152px);
  margin-inline: auto;
}

/* Type */
.label { font-size: 13px; line-height: 16px; font-weight: 500; }
.muted { color: var(--ink-muted); }
.lead { font-size: 20px; line-height: 30px; max-width: 34em; }
.text { max-width: 40em; }
.lead, .text, .service-list p { text-wrap: pretty; } /* no single word left on a last line */
.heading { font-size: 40px; line-height: 44px; font-weight: 500; }
.nowrap { white-space: nowrap; }
h1, .heading, .service-list h3, .button, .site-header nav a { font-family: var(--font-display); }

/* Links and focus */
a {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: color 120ms ease-out, background-color 120ms ease-out, border-color 120ms ease-out;
}
a:hover { color: var(--ink); }
a:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--focus-ring);
}

/* Header */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 32px;
}
.brand { display: block; flex: none; }
.brand img { width: auto; height: 40px; }
.site-header nav { display: flex; gap: 8px; margin-right: -8px; }
.site-header nav a {
  display: block;
  padding: 14px 8px;
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
  color: var(--ink-muted);
  text-decoration: none;
}
.site-header nav a:hover { color: var(--ink); }
@media (max-width: 360px) {
  .site-header { gap: 8px; }
  .site-header nav { gap: 0; }
}

/* The boxes, the user's own drawing, sit behind the text on the right. The text
   stays in front because it's positioned and comes later in the page. */
.intro { position: relative; overflow: hidden; }
.intro-art {
  position: absolute;
  top: 96px; /* level with the top of the headline, so it clears the legal name */
  right: max(var(--gutter), (100% - 1152px) / 2);
  width: min(48vw, 192px); /* ends just above the About text */
  pointer-events: none;
}
.hero, .about { position: relative; }
@media (min-width: 900px) {
  /* Its bottom edge lines up with the end of the About text. This width keeps
     the headline's blue stop clear of the drawing's left edge. */
  .intro-art { top: auto; bottom: var(--section); width: min(44vw, 480px); }
  .about .lead { max-width: 30em; }
}

/* Hero */
.hero { padding-block: 64px var(--section); }
.hero .label { margin-bottom: 16px; }
h1 {
  font-size: clamp(44px, 11vw, 96px);
  line-height: .958;
  font-weight: 500;
  text-wrap: balance;
}
@media (min-width: 900px) {
  .hero { padding-top: 128px; }
}

/* The logo's square full stop, as in the design system. The "." stays in the
   text for copying and screen readers. */
.stop {
  display: inline-block;
  width: .123em;
  height: .123em;
  margin-left: .06em;
  vertical-align: -.014em;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 1em;
  background: var(--accent);
}

.not-found { margin-top: 24px; }

/* About */
.about { padding-bottom: var(--section); }

/* Services */
.services { padding-bottom: var(--section); }
.services .heading { margin-bottom: 32px; }
.service-list {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.service-list li {
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.service-list h3 {
  margin-bottom: 8px;
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
}
.service-list p { color: var(--ink-muted); }
@media (min-width: 720px) {
  .service-list { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* Contact */
.contact { background: var(--surface); padding-block: var(--section); }
.contact .heading { margin-bottom: 24px; }
.contact .lead { margin-bottom: 24px; }
.contact .text { color: var(--ink-muted); }
.contact .text + .text { margin-top: 16px; }
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding-inline: 24px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  color: var(--on-accent);
  background: var(--accent);
  border: 1px solid var(--accent);
}
.button-secondary {
  color: var(--ink);
  background: transparent;
  border-color: var(--ink);
}
.button:hover { color: var(--bg); background: var(--ink); border-color: var(--ink); }

/* Footer */
.site-footer { padding-block: var(--section); }
.site-footer .label { margin-bottom: 24px; }
.site-footer dl { display: grid; gap: 16px; }
.site-footer dt { font-size: 13px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }
.site-footer dd { max-width: 40em; }
@media (min-width: 640px) {
  .site-footer dl { gap: 8px; }
  .site-footer dl > div {
    display: grid;
    grid-template-columns: 176px 1fr;
    gap: 16px;
    align-items: baseline;
  }
}