/*
 * Folio public brand lockup
 *
 * The website identity is the WORDMARK ALONE. The rounded blue tile that used
 * to sit beside it (/favicon.svg, a white lowercase f on a sky gradient) is a
 * platform icon, not a logo: at every size the site actually rendered it —
 * 38px in the header, 34px in the flow diagram, 30px in the footer — it read
 * as the Facebook mark, and the owner's standing brand decision is a wordmark
 * rather than an icon-mark. favicon.svg stays where an operating system
 * demands a square icon (browser tab, home screen, app), and nowhere else.
 *
 * This file owns the public wordmark, spacing and responsive lockup variants so
 * every website surface uses one identity instead of rebuilding it per page.
 *
 * The wordmark is drawn from a baked outline (Inter 700, tracking -0.075em —
 * exactly the specification the CSS below used to *request*). It used to be
 * live text in a font the site never loaded: index.html links Assistant, Heebo
 * and IBM Plex Sans Arabic only, and privacy/terms/accessibility/atlas load no
 * webfont at all, so "Inter" silently fell through to -apple-system and the
 * wordmark rendered as a different typeface on every platform — with tracking
 * tuned for a face that was not there. Baking it keeps the identity fixed on
 * every page and every device at zero network cost. The text node stays in the
 * markup as the no-mask fallback; it is decorative in all call sites
 * (`.folio-brand__type` is aria-hidden, the anchor carries the accessible name).
 */

:root {
  --folio-brand-sky: #0284c7;
  --folio-brand-deep: #075985;
  --folio-brand-ink: #0c2340;
  --folio-brand-muted: #6a6e75;
}

.folio-brand {
  --folio-brand-word-size: 25px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--folio-brand-ink);
  direction: ltr;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.folio-brand__type {
  min-width: 0;
  display: grid;
  align-items: center;
}

.folio-brand__wordmark {
  color: inherit;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "Segoe UI", sans-serif;
  font-size: var(--folio-brand-word-size);
  font-weight: 700;
  letter-spacing: -0.075em;
  line-height: 0.92;
}

/*
 * Baked wordmark. The outline's ink box is 0.778em tall and 2.3349:1 wide, so
 * the element is sized from --folio-brand-word-size and the glyphs land at the
 * same optical size the font-based rule asked for.
 */
@supports (mask-image: url("data:image/svg+xml,%3Csvg%3E%3C/svg%3E")) or
  (-webkit-mask-image: url("data:image/svg+xml,%3Csvg%3E%3C/svg%3E")) {
  .folio-brand__wordmark {
    display: block;
    width: calc(var(--folio-brand-word-size) * 1.8166);
    height: calc(var(--folio-brand-word-size) * 0.778);
    /* The glyphs are collapsed with font-size, not `color: transparent` —
       currentColor below has to keep resolving to the inherited ink colour. */
    font-size: 0;
    background-color: currentColor;
    -webkit-mask-image: var(--folio-wordmark-src);
    mask-image: var(--folio-wordmark-src);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    user-select: none;
  }
}

:root {
  --folio-wordmark-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 233.49 100'%3E%3Cpath fill='black' d='M45.79 28.48V42.82H0V28.48ZM12.38 98.63V23.1Q12.38 15.62 15.35 10.66Q18.33 5.7 23.48 3.23Q28.64 0.75 35.11 0.75Q39.57 0.75 43.24 1.46Q46.9 2.17 48.63 2.7L45.23 16.9Q44.08 16.55 42.46 16.25Q40.85 15.94 38.97 15.94Q34.68 15.94 32.9 17.98Q31.13 20.02 31.13 23.71V98.63ZM79.65 100Q69.1 100 61.39 95.47Q53.68 90.93 49.51 82.79Q45.35 74.65 45.35 63.86Q45.35 52.98 49.51 44.83Q53.68 36.67 61.39 32.14Q69.1 27.6 79.65 27.6Q90.24 27.6 97.93 32.14Q105.62 36.67 109.78 44.83Q113.95 52.98 113.95 63.86Q113.95 74.65 109.78 82.79Q105.62 90.93 97.93 95.47Q90.24 100 79.65 100ZM79.65 85.19Q84.68 85.19 88.06 82.4Q91.43 79.6 93.12 74.76Q94.81 69.91 94.81 63.79Q94.81 57.61 93.12 52.78Q91.43 47.96 88.06 45.19Q84.68 42.41 79.65 42.41Q74.63 42.41 71.26 45.19Q67.9 47.96 66.21 52.77Q64.52 57.58 64.52 63.79Q64.52 69.91 66.21 74.76Q67.9 79.6 71.26 82.4Q74.63 85.19 79.65 85.19ZM136.24 5.14V98.63H117.43V5.14ZM142.61 98.63V28.48H161.43V98.63ZM152.02 19.34Q147.77 19.34 144.73 16.5Q141.7 13.65 141.7 9.68Q141.7 5.62 144.73 2.81Q147.77 0 152.02 0Q156.29 0 159.32 2.8Q162.36 5.61 162.36 9.67Q162.36 13.66 159.32 16.5Q156.29 19.34 152.02 19.34ZM199.19 100Q188.64 100 180.93 95.47Q173.22 90.93 169.05 82.79Q164.89 74.65 164.89 63.86Q164.89 52.98 169.05 44.83Q173.22 36.67 180.93 32.14Q188.64 27.6 199.19 27.6Q209.78 27.6 217.47 32.14Q225.16 36.67 229.32 44.83Q233.49 52.98 233.49 63.86Q233.49 74.65 229.32 82.79Q225.16 90.93 217.47 95.47Q209.78 100 199.19 100ZM199.19 85.19Q204.22 85.19 207.6 82.4Q210.97 79.6 212.66 74.76Q214.35 69.91 214.35 63.79Q214.35 57.61 212.66 52.78Q210.97 47.96 207.6 45.19Q204.22 42.41 199.19 42.41Q194.17 42.41 190.8 45.19Q187.43 47.96 185.75 52.77Q184.06 57.58 184.06 63.79Q184.06 69.91 185.75 74.76Q187.43 79.6 190.8 82.4Q194.17 85.19 199.19 85.19Z'/%3E%3C/svg%3E");
}

/*
 * The descriptor is the one line that answers "what is this" beside the
 * wordmark. It was set at 11px, and 10.5px under 520px — under the site's own
 * readable-without-zoom floor on the exact screen where it matters most.
 */
.folio-brand__descriptor {
  margin-top: 5px;
  color: var(--folio-brand-muted);
  font-family: "Assistant", "Heebo", system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.15;
}

.folio-brand__descriptor[dir="rtl"] {
  text-align: left;
}

.folio-brand--compact {
  --folio-brand-word-size: 23px;
}

.folio-brand--small {
  --folio-brand-word-size: 21px;
}

@media (max-width: 520px) {
  .folio-brand {
    --folio-brand-word-size: 24px;
  }

  .folio-brand--small {
    --folio-brand-word-size: 21px;
  }

  .folio-brand__descriptor {
    font-size: 12px;
  }
}