@font-face {
  font-family: FormulaInk;
  src: url("assets/SpriteGraffiti.woff2") format("woff2");
  font-display: swap;
}

/* The display face marks navigation and actions. Forms and long text use Golos. */
body .ink-action, body .new-header .ink-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #f4f4f5;
  font: 400 clamp(20px, 2.2vw, 27px)/1.1 FormulaInk, Golos, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}
body .ink-action:hover, body .ink-action[aria-expanded="true"] { color: #a8b6ff; }
body .ink-action:focus-visible { outline: 2px solid #b5c0ff; outline-offset: 2px; }
body .ink-action[hidden] { display: none; }
.ink-action .ink-symbol { margin-inline-start: 5px; font: 400 .7em/1 Golos, sans-serif; }

@media (min-width: 901px) {
  body .ink-action:is(button) { border: 1px solid #565663; padding: 8px 18px; background: #19191f; font-size: 23px; }
  body .ink-action:is(button):hover { background: #292932; }
  body header a.ink-action { font: 500 15px/1.4 Golos, sans-serif; text-decoration: underline; text-underline-offset: 5px; }
  body .new-header nav a { min-height: 44px; font-size: 15px; }
  body .new-header nav a:hover, body .new-header nav a[aria-current] { text-decoration: underline; text-underline-offset: 6px; }
  body .new-header .header-actions { justify-self: end; }
}

/* Branding stays on a single rail at phone widths. */
body .new-header { background: #09090c; backdrop-filter: none; }
body .article-header { background: #09090c; backdrop-filter: none; }
body .new-header .menu-toggle, body .new-header .course-catalog { display: none; }
.checkout-page > header .ink-action, .payment-result-page > header .ink-action { flex-shrink: 0; }
.checkout-page > header > a:first-child, .payment-result-page .payment-brand { flex: 0 1 250px; min-width: 0; }
.payment-result-page > header { flex-wrap: nowrap; }
.cabinet-header > a { display: flex; align-items: center; min-height: 44px; }
.legal-links a, .article-footer nav a, .lesson-pager a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
@media (max-width: 900px) {
  body .new-header .menu-toggle, body .new-header .course-catalog {
    display: inline-flex;
    grid-column: 3;
    grid-row: 1;
    padding-inline: 6px;
  }
}
@media (max-width: 600px) {
  body .new-header { column-gap: 8px; }
  body .ink-action { padding-inline: 6px; font-size: 20px; }
  body.checkout-page > header { gap: 10px; }
  body.payment-result-page header { gap: 10px; }
  body.payment-result-page .payment-brand { width: auto; }
  .legal-links { column-gap: 18px; row-gap: 0; }
}