/* Corporate: the yellow-band design, laid over the same prose markup. */

html {
  font: 400 100%/1.66667 var(--sans);
}

body {
  font-size: 1.125rem;
  padding: 0 24px 64px;
}

a {
  text-underline-offset: 4px;
}

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

/* Letterhead: the mark alone; the name opens the line below it. */
.vgs-mark {
  width: 36px;
  height: 36px;
}

.masthead {
  margin: 0 -24px;
  padding: 40px max(24px, calc((100% + 48px - 1140px) / 2)) 88px;
  background: var(--vgs);
  color: #2f363b;
}

.masthead ::selection {
  background: #2f363b;
  color: var(--vgs);
}

.masthead a {
  text-decoration-thickness: 1px;
  text-decoration-color: rgb(47 54 59 / .35);
}

.masthead a:hover {
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

.intro {
  max-width: 24em;
  margin-top: 96px;
  font: 400 1.5625rem/1.44 var(--sans);
  letter-spacing: -.01em;
  text-wrap: pretty;
}

@media (max-width: 600px) {
  .intro {
    margin-top: 64px;
    font-size: 1.375rem;
    line-height: 1.45455;
  }

  .masthead {
    padding-bottom: 64px;
  }
}

main, .colophon {
  max-width: 1140px;
  margin-inline: auto;
}

main > section {
  padding-top: 56px;
  margin-top: 72px;
  border-top: 1px solid var(--hairline);
}

h2 {
  font: 900 1.5625rem/1.28 var(--sans);
  letter-spacing: -.02em;
  margin-bottom: 24px;
}

/* Products lead with copy, reversing the columns used by the sections below. */
.products {
  margin-top: 64px;
  padding-top: 0;
  border-top: 0;
}

.product {
  --logo-left: 0px;
  --logo-top: 0px;
  --wordmark-offset: 74px;
  position: relative;
  margin-top: 48px;
  padding-top: 80px;
}

.product-content {
  display: block;
  max-width: 36em;
}

.product-name {
  font-weight: 700;
}

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

.product-name .ico {
  display: none;
}

.product::before, .product::after {
  content: "";
  position: absolute;
  top: calc(var(--logo-top) + 12px);
  left: var(--logo-left);
  height: 44px;
}

.product::before {
  background: left top / contain no-repeat;
}

.product::after {
  left: calc(var(--logo-left) + var(--wordmark-offset));
  background-color: var(--ink);
  mask: left top / contain no-repeat;
}

.flipper::before {
  background-image: url("../images/mark-flipper.svg");
  top: 7px;
  left: calc(var(--logo-left) + 12px);
  width: 48px;
  height: 55px;
}

.flipper::after {
  mask-image: url("../images/wm-flipper.svg");
  width: 123px;
}

.fireside::before {
  background-image: url("../images/mark-fireside.svg");
  top: -1px;
  left: calc(var(--logo-left) + 14px);
  width: 44px;
  height: 62px;
}

.fireside::after {
  mask-image: url("../images/wm-fireside.svg");
  width: 137px;
}

/* One rule separates the upcoming pair from the available apps. */
.product.upcoming {
  --identity-ink: #9a9fa1;
  color: var(--muted);
}

.product:not(.upcoming) + .upcoming {
  --logo-top: 48px;
  border-top: 1px solid var(--hairline);
  padding-top: 128px;
}

/* Upcoming symbols occupy the same 44px column, centered beside 36px lettering.
   Separate crops of the supplied artwork preserve its shapes without letting
   the lockup's original spacing dictate this page's alignment. */
.upcoming::before, .upcoming::after {
  background: var(--identity-ink);
  mask: left top / contain no-repeat;
}

.upcoming::before {
  left: calc(var(--logo-left) + 14px);
  width: 44px;
}

.upcoming::after {
  top: calc(var(--logo-top) + 16px);
  height: 36px;
}

.form-fluent::before {
  top: calc(var(--logo-top) + 16px);
  height: 36px;
  mask-image: url("../images/mark-formfluent.svg");
}

.form-fluent::after {
  width: 158.42px;
  mask-image: url("../images/wm-formfluent.svg");
}

.flare::before {
  mask-image: url("../images/icons/flare-placeholder.svg");
}

.flare::after {
  width: 72.34px;
  mask-image: url("../images/wm-flare.svg");
}

@media (min-width: 900px) {
  .product {
    --logo-left: calc((100% - 24px) / 3 * 2 + 24px);
    padding: 0 calc((100% - 24px) / 3 + 24px) 0 0;
    min-height: 64px;
  }

  .product:not(.upcoming) + .upcoming {
    padding-top: 48px;
  }
}

/* Sections after the products: heading left, content right. */
@media (min-width: 900px) {
  .team, .also, .elsewhere {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: 24px;
  }

  .team > :not(h2), .also > :not(h2), .elsewhere > :not(h2) {
    grid-column: 2;
    max-width: 36em;
  }

  .team h2, .also h2, .elsewhere h2 {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: start;
    padding-right: 24px;
  }
}

/* Who we are: the four of us first, then a short paragraph. */
.people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}

@media (min-width: 720px) {
  .people {
    display: flex;
    flex-wrap: wrap;
    column-gap: 40px;
  }
}

.people a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

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

.people + p {
  font-size: 1rem;
  line-height: 1.625;
  color: var(--muted);
}

/* What else: grouped lists with icons, two groups across beside the heading. */

.group h3 {
  font: 400 0.8125rem/1.84615 var(--mono);
  color: var(--muted);
  margin-bottom: 12px;
}

.group dl {
  display: grid;
  gap: 16px;
}

.group h4 {
  font: 700 0.9375rem/1.46667 var(--sans);
  margin-bottom: 12px;
}

.group dl + h4 {
  margin-top: 24px;
}

/* Author attribution belongs to the letter; gems share one visual list here. */
.gems h4 {
  display: none;
}

.gems dl + h4 + dl {
  margin-top: 16px;
}

.group dl > div {
  position: relative;
  padding-left: 46px;
  min-height: 32px;
}

.group .ico {
  position: absolute;
  left: 0;
  top: 2px;
  width: 32px;
  height: 32px;
  margin: 0;
}

.group .ico.cover {
  width: 24px;
  left: 4px;
}

.group dt a {
  font-weight: 700;
}

.group dd {
  font-size: 0.9375rem;
  line-height: 1.466667;
  color: var(--muted);
}

.group + .group {
  margin-top: 40px;
}

@media (min-width: 900px) {
  .also, .elsewhere {
    grid-template-columns: calc((100% - 24px) / 3) repeat(2, minmax(0, 1fr));
    row-gap: 40px;
  }

  .also > .group, .elsewhere > .group {
    grid-column: auto;
    max-width: none;
  }

  .elsewhere .group + .group {
    margin-top: 0;
  }

  .also > .group {
    grid-column: 2 / -1;
  }

  .also .group dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }
}

/* Footer: the sign-off set as the wordmark, then the company details. */
.colophon {
  margin-top: 72px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 4px 24px;
}

.facts {
  margin-top: 24px;
}

@media (min-width: 900px) {
  .colophon {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  }

  .facts {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin-top: 0;
  }
}

.closing {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
}

.signature {
  font: 900 1.25rem/1.1 var(--sans);
  letter-spacing: -.02em;
  width: 6em;
}

.postscript {
  margin-top: 20px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
  align-self: start;
}

.facts {
  font-size: 0.9375rem;
  line-height: 1.6;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5em), 1fr));
  gap: 16px 24px;
}

.easter-egg {
  grid-column: 1 / -1;
  margin-top: 32px;
}

@media (forced-colors: active) {
  .product::before, .product::after {
    display: none;
  }

  .product {
    min-height: 0;
    padding-top: 0;
  }

  .product:not(.upcoming) + .upcoming {
    padding-top: 48px;
  }
}