/*
 * The SecondPage lockup on the static marketing pages.
 *
 * The wordmark is inline SVG outlines, not live type, so the logo is identical
 * on every platform and needs no webfont. These rules only colour it and set
 * its size; the geometry lives in the markup, generated from
 * apps/web/components/brand/brand-geometry.ts.
 */

.secondpage-wordmark {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  text-decoration: none;
}

/* Sized by font size, so existing type scales keep controlling the lockup. */
.secondpage-wordmark .spw {
  display: block;
  height: 0.9531em;
  width: auto;
  overflow: visible;
}

.secondpage-wordmark .spw-ink {
  fill: currentColor;
}

.secondpage-wordmark .spw-ink-stroke {
  stroke: currentColor;
}

/* The one accent: Mineral Lilac, only ever the diamond. */
.secondpage-wordmark .spw-accent {
  fill: #5a3d6e;
}

/* On dark grounds the diamond lightens so it keeps its contrast. */
@media (prefers-color-scheme: dark) {
  .secondpage-wordmark .spw-accent {
    fill: #bda2cf;
  }
}

.secondpage-wordmark[data-tone="dark"] .spw-accent,
[data-theme="dark"] .secondpage-wordmark .spw-accent {
  fill: #bda2cf;
}