/* 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. */
/* The intro fills the first screen below the header, so Services starts at the
   fold, with its content centred. */
.intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 108px);
  min-height: calc(100svh - 108px);
  padding-block: 32px; /* keeps the drawing off the header on short screens */
  overflow: hidden;
}
.intro-inner { position: relative; }
.intro-art {
  position: absolute;
  top: 64px; /* level with the top of the headline */
  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, 448px); }
  .about .lead { max-width: 30em; }
  /* Tall enough for the whole drawing, with the text at the bottom. */
  .intro-inner {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: calc(min(44vw, 448px) + var(--section));
  }
}

/* Hero */
.hero { padding-block: 64px var(--section); }
h1 {
  font-size: clamp(44px, 11vw, 96px);
  line-height: .958;
  font-weight: 500;
  text-wrap: balance;
}

/* 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: a papel section in the design system's light theme. Each box has the
   hard royal blue shadow from the email signature, 8px with no blur. The thin
   noite outline is there because the boxes and the ground are the same papel. */
.services {
  --bg: #f1eadc;
  --surface: #e8e0cf;
  --line: #cdc2ad;
  --ink: #0a0a0a;
  --ink-muted: #5e574c;
  --accent-text: #1f3fc8;
  --focus-ring: 0 0 0 2px #f1eadc, 0 0 0 4px #1f3fc8;
  background: var(--bg);
  color: var(--ink);
  padding-block: var(--section);
}
.services .heading { margin-bottom: 8px; }
.services .lead { margin-bottom: 48px; color: var(--ink-muted); }
.service-list {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.service-list li {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--bg);
  border: 1px solid var(--ink);
  box-shadow: 8px 8px 0 var(--accent);
}
.service-list .number {
  margin-bottom: 16px;
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
  color: var(--ink-muted);
}
.service-list h3 {
  margin-bottom: 8px;
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
}
.service-list p { color: var(--ink-muted); }
.service-list .more { margin-top: auto; padding-top: 16px; }
@media (min-width: 640px) {
  .service-list { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (min-width: 1000px) {
  .service-list { grid-template-columns: repeat(3, 1fr); }
}

/* Contact */
.contact { position: relative; background: var(--surface); padding-block: var(--section); }
/* The stair from the logo's icon, in royal blue, flush with the band's top right
   corner. On phones it stays above the first line of text; on wider screens the
   lead is kept narrow enough to stay clear of it. */
.contact-art {
  position: absolute;
  top: 0;
  right: 0;
  width: 128px;
  pointer-events: none;
}
@media (min-width: 900px) {
  .contact-art { width: min(28vw, 384px); }
  .contact .lead { max-width: 30em; }
}
.contact .wrap { position: relative; }
.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;
  }
}