/* Prose: the page reads as a short letter with underlined links, grouped by hairlines and headings. */

html {
  border-top: 6px solid var(--vgs);
  font: 400 100%/1.7 var(--sans);
}

body {
  font-size: 1.25rem;
  max-width: calc(32em + 48px);
  padding: 48px 24px 96px;
  margin: 0 auto;
}

@media (max-width: 700px) {
  body {
    font-size: 1.125rem;
    line-height: 1.66667;
    padding-top: 32px;
  }
}

a {
  text-decoration-line: underline;
  text-underline-offset: 5px;
}

a:focus-visible {
  outline-offset: 3px;
}

p {
  margin-top: 1em;
}

.product-name {
  white-space: nowrap;
}

.form-fluent .ico {
  width: 1.25em;
  height: 1.25em;
  vertical-align: -.22em;
}

.product {
  margin-top: 1.5em;
}

.product-meta {
  margin-bottom: 4px;
}

/* Letterhead: the mark, then the opening line, whose links get a quieter underline. */
.vgs-mark {
  width: 28px;
  height: 28px;
  margin-bottom: 40px;
}

.intro {
  font-weight: 700;
  text-wrap: pretty;
}

.intro a {
  text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
}

.intro a:hover {
  text-decoration-color: var(--vgs);
}

/* Sections: a hairline and a bold heading that says what the section holds. */
main > section {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--hairline);
}

h2 {
  font: 700 1em/1.7 var(--sans);
}

h2 + * {
  margin-top: 12px;
}

@media (max-width: 700px) {
  main > section {
    margin-top: 40px;
    padding-top: 32px;
  }
}

/* Team portraits and names wrap as text grows. */
.people {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.people a {
  display: flex;
  align-items: center;
  gap: 8px;
}

.people img {
  width: 32px;
  height: 32px;
}

/* What else: each group reads as a paragraph with a run-in heading. */
.group + .group {
  margin-top: 1em;
}

.group h3 {
  display: inline;
  font-size: 1em;
  font-weight: 700;
}

.group h3::after, .group dt::after {
  content: ".";
  content: "." / "";
}

.group dl, .group dl > div, .group dt, .group dd {
  display: inline;
}

.group h4 {
  display: inline;
  font: inherit;
}

.group h4::after {
  content: ":";
  content: ":" / "";
}

/* Sign-off: the company name, presented in Marydale (pre-rendered, since the font file forbids embedding). */
.colophon {
  margin-top: 2em;
}

.signature {
  margin-top: 8px;
}

@supports (mask-image: url("x.svg")) {
  .signature {
    width: min(302px, 80%);
    aspect-ratio: 8432 / 1524;
    overflow: hidden;
    white-space: nowrap;
    color: transparent;
    background-color: var(--ink);
    mask: url("../images/signature.svg") left center / contain no-repeat;
  }
}

@media (forced-colors: active) {
  .signature {
    mask: none;
    color: CanvasText;
    background: none;
    aspect-ratio: auto;
    width: auto;
    white-space: normal;
    overflow: visible;
  }
}

.postscript {
  margin-top: 1.5em;
}

.easter-egg {
  margin-top: 32px;
}

/* Then a plain website footer with the company details. */
.facts {
  margin-top: 72px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  font-size: 0.9375rem;
  line-height: 1.6;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16em), 1fr));
  gap: 16px 32px;
}