/* The company website's look. Every color, type size and space is one of Stage UI's tokens, from tokens.css (written
   from crates/ui), so the site is in Stage's own values, light or dark as the visitor's system is. */

/* Inter, the one copy in crates/ui/fonts. build.sh puts the file under a folder named for its contents and writes that
   path here and in each page's preload, so the font can be cached for good. Text waits for it, for up to about 3
   seconds, rather than being drawn in another face first; on a first visit slower than that, it is drawn in the
   system's face and redrawn in Inter when the font arrives. */
@font-face {
  font-family: "Inter";
  src: url("/fonts/4989b125924991b9/InterVariable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

.stage-ui {
  background: var(--ui-surface);
  color: var(--ui-text);
  font-family: "Inter", system-ui, sans-serif;
  font-size: var(--ui-text-l);
  font-weight: var(--ui-weight-regular);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
}

/* One column, as wide as a comfortable line of text: a measure is counted in characters, so it holds at any size. */
.site-header,
main,
.site-footer {
  max-width: 66ch;
  margin-inline: auto;
  padding-inline: var(--ui-space-x4l);
}

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

h1,
h2 {
  font-weight: var(--ui-weight-semibold);
  line-height: 1.3;
  text-wrap: balance;
}

h1 {
  font-size: var(--ui-text-x3l);
}

h2 {
  font-size: var(--ui-text-l);
}

p {
  text-wrap: pretty;
}

/* Paragraphs stand apart by a little over half a line; a section's heading sits close over what it heads. */
main > * + * {
  margin-top: var(--ui-space-xl);
}

section > * + * {
  margin-top: var(--ui-space-xs);
}

a {
  color: var(--ui-accent-ink);
  text-decoration-line: underline;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: var(--ui-space-xxs);
}

/* The color stands apart from the outline: a browser without light-dark() can't read the token, and then drops only the
   color (to its own default) and keeps the ring. */
a:focus-visible {
  outline: var(--ui-space-xxs) solid;
  outline-color: var(--ui-focus-ring);
  outline-offset: var(--ui-space-xxs);
  border-radius: var(--ui-radius-xs);
}

/* The header: the name in type, then the three pages. */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ui-space-m) var(--ui-space-x4l);
  padding-block: var(--ui-space-x5l);
}

.site-name {
  font-weight: var(--ui-weight-semibold);
}

.site-name a,
.site-nav a {
  color: var(--ui-text);
  text-decoration-line: none;
}

.site-name a:hover,
.site-nav a:hover {
  text-decoration-line: underline;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-x4l);
  padding: 0;
  list-style: none;
}

/* The page you are on is marked as a page's own tab is: underlined in the accent. */
.site-nav a[aria-current="page"] {
  text-decoration-line: underline;
  text-decoration-color: var(--ui-accent);
  text-decoration-thickness: var(--ui-space-xxs);
}

main {
  padding-block: var(--ui-space-x5l);
}

main > section {
  margin-top: var(--ui-space-x5l);
}

.lead {
  font-size: var(--ui-text-xl);
  line-height: 1.5;
}

.note {
  color: var(--ui-text-muted);
}

/* Company information: each name over its value. */
.facts dt {
  color: var(--ui-text-muted);
}

.facts dt + dd + dt {
  margin-top: var(--ui-space-xl);
}

/* The footer's lines are smaller, but the footer itself keeps the body's size, so its measure is the column's. */
.site-footer {
  padding-block: var(--ui-space-x5l);
  color: var(--ui-text-muted);
}

.site-footer > * {
  font-size: var(--ui-text-m);
}

.site-footer > * + * {
  margin-top: var(--ui-space-m);
}

.site-footer > :first-child {
  border-top: var(--ui-space-hair) solid var(--ui-border);
  padding-top: var(--ui-space-x4l);
}

/* A phrase of an address breaks between its parts, never inside one. */
.unbroken {
  white-space: nowrap;
}

@media print {
  .stage-ui {
    color-scheme: light;
    background: none;
  }

  .site-nav {
    display: none;
  }

  .site-header,
  main,
  .site-footer {
    padding-inline: 0;
  }
}