@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/onest-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/onest-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/onest-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/onest-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  --canvas: #f4f5f6;
  --canvas: oklch(96.7% 0.003 260);
  --surface: #ffffff;
  --surface-muted: oklch(94.8% 0.004 260);
  --ink: #0c0d0e;
  --ink: oklch(15.6% 0.004 260);
  --muted: #596069;
  --muted: oklch(48% 0.014 260);
  --line: oklch(74% 0.008 260 / 0.34);
  --line-strong: oklch(54% 0.01 260 / 0.42);
  --night: #060706;
  --night: oklch(11.5% 0.004 145);
  --night-raised: #111310;
  --night-raised: oklch(17.5% 0.012 135);
  --night-soft: #aeb3ad;
  --night-soft: oklch(75% 0.01 145);
  --accent: #ed4d05;
  --accent: oklch(63.81% 0.2065 38.13);
  --accent-dark: #a42f00;
  --accent-dark: oklch(48% 0.16 38.13);
  --danger: oklch(65% 0.2 32);

  --font: "Onest", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --gutter: clamp(1.25rem, 4.2vw, 4.5rem);
  --container: 90rem;
  --section-space: clamp(7rem, 13vw, 12rem);

  --radius-control: 0.625rem;
  --radius-surface: 0.875rem;
  --radius-panel: 1rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-ui: cubic-bezier(0.25, 1, 0.5, 1);
  --duration-micro: 120ms;
  --duration-ui: 240ms;

  --z-base: 0;
  --z-sticky: 20;
  --z-drawer: 40;
  --z-tooltip: 60;
}

body.menu-open {
  overflow: hidden;
}

.site-nav {
  --nav-height: 3.25rem;
  --nav-gap: 0.25rem;
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-sticky);
  padding: 1.25rem clamp(1.25rem, 2.4vw, 3rem) 0;
  color: var(--ink);
  pointer-events: none;
}

.nav-shell {
  display: grid;
  grid-template-columns: var(--nav-height) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--nav-gap);
  width: 100%;
  max-width: 128rem;
  margin-inline: auto;
  pointer-events: auto;
}

.site-nav.is-scrolled .nav-shell {
  grid-template-columns: var(--nav-height) clamp(30rem, 31vw, 39rem) auto;
  width: max-content;
  max-width: calc(100vw - 2rem);
}

.nav-piece {
  position: relative;
  isolation: isolate;
  background: transparent;
}

.nav-piece::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 1px solid oklch(100% 0 0 / 0.9);
  border-radius: inherit;
  background: oklch(99.1% 0.002 260 / 0.84);
  box-shadow:
    inset 0 0 0 1px oklch(25% 0.008 260 / 0.055),
    0 0.375rem 0.5rem oklch(20% 0.01 260 / 0.08);
  backdrop-filter: blur(1rem) saturate(135%);
  opacity: 0;
  transform: translate3d(0, -0.25rem, 0) scale(0.985);
  transition:
    opacity 240ms ease-out,
    transform 460ms var(--ease-out);
  pointer-events: none;
}

.nav-piece > * {
  position: relative;
  z-index: 1;
}

.site-nav.is-scrolled .nav-piece::before, body.menu-open .nav-piece::before {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  width: fit-content;
  min-height: 2.75rem;
  font-size: 1rem;
  font-weight: 620;
  letter-spacing: -0.035em;
}

.nav-brand {
  z-index: 2;
  justify-self: start;
  justify-content: center;
  width: var(--nav-height);
  min-width: var(--nav-height);
  min-height: var(--nav-height);
  padding: 0;
  overflow: visible;
  border-radius: 0.625rem;
}

.nav-brand .brand-mark {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.nav-brand .brand-logo-image {
  padding: 0;
}

.nav-brand .brand-name {
  position: absolute;
  left: calc(100% + 0.625rem);
  width: max-content;
  max-width: none;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 180ms ease-out,
    transform 420ms var(--ease-out);
}

.site-nav.is-scrolled .nav-brand .brand-name {
  opacity: 0;
  transform: translate3d(-0.625rem, 0, 0);
  pointer-events: none;
}

.brand-mark {
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 0.5rem;
  border: 1px solid oklch(41% 0.012 260 / 0.14);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.5);
}

.brand-logo-image {
  width: 100%;
  height: 100%;
  padding: 0.18rem;
  object-fit: contain;
}

.desktop-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  gap: clamp(1.25rem, 2.5vw, 3rem);
  width: 100%;
  min-width: 0;
  min-height: var(--nav-height);
  padding: 0.25rem;
  border-radius: 0.625rem;
}

.site-nav.is-scrolled .desktop-nav {
  justify-content: space-evenly;
  gap: 0;
}

.pill-nav-link {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding-inline: clamp(0.75rem, 1vw, 1rem);
  overflow: hidden;
  border-radius: 999px;
  color: oklch(26% 0.008 260);
  font-size: 0.875rem;
  line-height: 1;
  white-space: nowrap;
}

.pill-nav-circle {
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: 50%;
  display: block;
  width: var(--pill-circle-size, 8rem);
  height: var(--pill-circle-size, 8rem);
  border-radius: 50%;
  background: var(--ink);
  transform: translate3d(-50%, 0, 0) scale(0);
  transform-origin: 50% var(--pill-circle-origin, 7rem);
  pointer-events: none;
}

.pill-nav-label-stack {
  position: relative;
  z-index: 1;
  display: inline-block;
  line-height: 1;
}

.pill-nav-label, .pill-nav-label-hover {
  display: inline-block;
  line-height: 1;
  will-change: transform;
}

.pill-nav-label-hover {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--surface);
  opacity: 0;
  transform: translate3d(0, 3.5rem, 0);
}

.pill-nav-label-hover::before {
  content: "";
  display: inline-block;
  width: 0.32rem;
  height: 0.32rem;
  margin-right: 0.42rem;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: 0.08rem;
}

.pill-nav-link:not([data-pill-ready]) .pill-nav-circle, .pill-nav-link:not([data-pill-ready]) .pill-nav-label, .pill-nav-link:not([data-pill-ready]) .pill-nav-label-hover {
  transition: transform 300ms var(--ease-out), opacity 220ms ease-out;
}

.pill-nav-link:focus-visible {
  outline-offset: -0.2rem;
}

.pill-nav-link:not([data-pill-ready]):hover .pill-nav-circle, .pill-nav-link:not([data-pill-ready]):focus-visible .pill-nav-circle {
  transform: translate3d(-50%, 0, 0) scale(1.2);
  transition: transform 300ms var(--ease-out);
}

.pill-nav-link:not([data-pill-ready]):hover .pill-nav-label, .pill-nav-link:not([data-pill-ready]):focus-visible .pill-nav-label {
  transform: translate3d(0, -3.5rem, 0);
  transition: transform 300ms var(--ease-out);
}

.pill-nav-link:not([data-pill-ready]):hover .pill-nav-label-hover, .pill-nav-link:not([data-pill-ready]):focus-visible .pill-nav-label-hover {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: transform 300ms var(--ease-out), opacity 220ms ease-out;
}

.nav-actions {
  display: flex;
  justify-self: end;
  justify-content: flex-end;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  min-height: var(--nav-height);
  padding: 0.25rem;
  border-radius: 0.625rem;
}

.nav-actions .language-switch {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 160ms ease-out, transform 360ms var(--ease-out);
}

.nav-actions .language-switch button {
  min-width: 2.75rem;
  min-height: 2.75rem;
  border-radius: 0.5rem;
  transition: color var(--duration-micro) ease-out, background-color 220ms ease-out;
}

.site-nav.is-scrolled .nav-actions {
  width: auto;
}

.site-nav.is-scrolled .nav-actions .language-switch {
  position: absolute;
  right: calc(100% + 0.5rem);
  opacity: 0;
  transform: translate3d(0.5rem, 0, 0);
  pointer-events: none;
}

.nav-actions .language-switch button[aria-pressed="true"] {
  background: transparent;
}

.site-nav.is-scrolled .nav-actions .language-switch button[aria-pressed="true"], body.menu-open .nav-actions .language-switch button[aria-pressed="true"] {
  background: oklch(15.6% 0.004 260 / 0.075);
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  width: fit-content;
  font-size: 0.9375rem;
  font-weight: 520;
}

.arrow-link[data-specular-button] {
  --specular-angle: 38deg;
  --specular-strength: 0;
  position: relative;
  isolation: isolate;
  min-height: 3.25rem;
  padding: 0.25rem 0.25rem 0.25rem 0.9rem;
  overflow: visible;
  border: 1px solid oklch(38% 0.012 260 / 0.2);
  border-radius: 0.75rem;
  background: oklch(100% 0 0 / 0.76);
  transition: transform var(--duration-micro) ease-out, background-color var(--duration-ui) var(--ease-ui);
}

.specular-button__edge {
  position: absolute;
  inset: -1px;
  z-index: 0;
  overflow: hidden;
  padding: 1px;
  border-radius: calc(0.75rem + 1px);
  opacity: var(--specular-strength);
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.specular-button__edge > span {
  position: absolute;
  inset: -180%;
  background: conic-gradient(
    transparent 0 34%,
    oklch(63.81% 0.2065 38.13 / 0.35) 41%,
    oklch(99% 0.015 38.13) 48%,
    var(--accent) 54%,
    transparent 68% 100%
  );
  transform: rotate(var(--specular-angle));
}

.arrow-link[data-border-glow] {
  --specular-strength: 0.62;
  box-shadow:
    inset 0 0 0 1px oklch(100% 0 0 / 0.24),
    0 0 1.15rem oklch(63.81% 0.2065 38.13 / 0.07);
}

.arrow-link[data-border-glow] .specular-button__edge {
  filter: drop-shadow(0 0 0.24rem oklch(63.81% 0.2065 38.13 / 0.24));
}

.arrow-link[data-border-glow] .specular-button__edge > span {
  animation: specular-border-orbit 5.2s linear infinite;
  will-change: transform;
}

@keyframes specular-border-orbit {
  from { transform: rotate(38deg); }
  to { transform: rotate(398deg); }
}

.arrow-link[data-specular-button]:hover .specular-button__edge > span, .arrow-link[data-specular-button]:focus-visible .specular-button__edge > span {
  will-change: transform;
}

.arrow-link[data-specular-button] > span:not(.specular-button__edge) {
  position: relative;
  z-index: 1;
}

.arrow-link[data-specular-button]:focus-visible {
  --specular-strength: 1 !important;
}

.arrow-link[data-specular-button]:active {
  transform: scale(0.985);
}

.arrow-link > span:first-child:not(.specular-button__edge), .arrow-link > .specular-button__edge + span {
  text-decoration: underline;
  text-decoration-thickness: 0.0625rem;
  text-underline-offset: 0.32em;
}

.arrow-box {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-control);
  background: var(--accent);
  color: var(--ink);
  font-size: 1.125rem;
  transition: transform 280ms var(--ease-out), background-color var(--duration-micro) ease-out;
}

.arrow-link:hover .arrow-box {
  transform: translate3d(0.15rem, -0.15rem, 0);
}

.arrow-link:active .arrow-box, .menu-toggle:active {
  transform: scale(0.94);
  transition-duration: var(--duration-micro);
}

.menu-toggle {
  display: none;
  position: relative;
  justify-self: end;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  cursor: pointer;
  transition: transform var(--duration-micro) ease-out;
}

.menu-toggle span {
  position: absolute;
  left: 0.625rem;
  width: 1.5rem;
  height: 1px;
  background: currentColor;
  transition: transform var(--duration-ui) var(--ease-out), top var(--duration-ui) var(--ease-out);
}

.menu-toggle span:first-child {
  top: 1.05rem;
}

.menu-toggle span:last-child {
  top: 1.65rem;
}

body.menu-open .menu-toggle span:first-child {
  top: 1.35rem;
  transform: rotate(45deg);
}

body.menu-open .menu-toggle span:last-child {
  top: 1.35rem;
  transform: rotate(-45deg);
}

.mobile-panel {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-sticky) - 1);
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 8rem var(--gutter) 2rem;
  background: oklch(96.7% 0.003 260 / 0.92);
  backdrop-filter: blur(1.5rem) saturate(160%);
  visibility: hidden;
  opacity: 0;
  transform: scale(0.985) translate3d(0, -0.75rem, 0);
  transform-origin: calc(100% - var(--gutter) - 1.4rem) 2.625rem;
  transition:
    opacity 220ms ease-out,
    transform 420ms var(--ease-out),
    visibility 0s linear 420ms;
}

.mobile-panel.is-open {
  visibility: visible;
  opacity: 1;
  transform: scale(1) translate3d(0, 0, 0);
  transition-delay: 0s;
}

.mobile-panel nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
}

.mobile-panel nav a {
  width: fit-content;
  font-size: clamp(2.25rem, 10vw, 4.5rem);
  font-weight: 330;
  letter-spacing: -0.04em;
  line-height: 1.08;
}

.mobile-panel nav a:last-child {
  font-weight: 590;
}

.mobile-panel-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.8125rem;
}

@media (max-width: 72rem) {
  .desktop-nav {
      gap: 1.25rem;
    }
}

@media (max-width: 64rem) {
  .site-nav {
      grid-template-columns: 1fr auto;
    }
  .desktop-nav, .nav-actions {
      display: none;
    }
  .menu-toggle {
      display: block;
    }
}

@media (max-width: 27rem) {
  .brand-name {
      font-size: 0.9375rem;
    }
}

@media (prefers-reduced-transparency: reduce) {
  .site-nav.is-scrolled, body.menu-open .site-nav, .mobile-panel {
      background: var(--canvas);
      backdrop-filter: none;
    }
}

@media (prefers-contrast: more) {
  .site-nav.is-scrolled {
      background: var(--surface);
    }
}

@media (prefers-reduced-motion: reduce) {
  .arrow-link[data-border-glow] .specular-button__edge > span {
      animation: none !important;
    }
  .arrow-link[data-border-glow] .specular-button__edge > span {
      transform: rotate(38deg);
    }
}

.nav-actions .nav-contact[data-specular-button] {
  flex: 1 1 auto;
  justify-content: space-between;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0 0 0 0.75rem;
  border-color: transparent;
  background: transparent;
  font-size: 0.875rem;
}

.nav-actions .nav-contact > span:first-of-type {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3rem;
}

.nav-actions .nav-contact .arrow-box {
  width: 2.5rem;
  height: 2.5rem;
}

@media (max-width: 72rem) {
  .pill-nav-link {
      padding-inline: 0.7rem;
    }
}

@media (max-width: 64rem) {
  .site-nav {
      --nav-height: 3.25rem;
      padding-inline: 1rem;
    }
  .nav-shell {
      grid-template-columns: 1fr auto;
    }
  .site-nav.is-scrolled .nav-shell, body.menu-open .nav-shell {
      grid-template-columns: 1fr auto;
      width: 100%;
      max-width: none;
    }
  .nav-brand, .site-nav.is-scrolled .nav-brand, body.menu-open .nav-brand {
      width: auto;
      min-width: 8.75rem;
      min-height: var(--nav-height);
      justify-content: flex-start;
      padding-inline: 0.75rem;
    }
  .nav-brand .brand-name, .site-nav.is-scrolled .nav-brand .brand-name, body.menu-open .nav-brand .brand-name {
      position: static;
      max-width: 7rem;
      opacity: 1;
      transform: none;
    }
  .menu-toggle.nav-piece {
      width: var(--nav-height);
      height: var(--nav-height);
      border-radius: 0.75rem;
    }
}

@media (prefers-reduced-transparency: reduce) {
  .nav-piece::before {
      background: var(--canvas);
      backdrop-filter: none;
    }
}

@media (prefers-contrast: more) {
  .site-nav.is-scrolled .nav-piece::before, body.menu-open .nav-piece::before, .pill-nav-link:hover .pill-nav-circle {
      border-color: var(--ink);
    }
}

/* Blog-specific glue: show the main-site nav instead of the Ghost header */
#gh-head { display: none !important; }
body { padding-top: 6.5rem; }
.site-nav, .site-nav *, .mobile-panel, .mobile-panel * { box-sizing: border-box; }
.site-nav, .mobile-panel { font-family: Onest, system-ui, sans-serif; line-height: 1.4; }
.site-nav a, .mobile-panel a { text-decoration: none; }
.site-nav a:not(.nav-contact) { color: inherit; }
.mobile-panel nav a { color: inherit; }

/* Minimal blog nav: logo + CTA, centred, same on every screen size */
.site-nav .nav-shell,
.site-nav.is-scrolled .nav-shell {
    grid-template-columns: var(--nav-height) auto !important;
    width: max-content !important;
    max-width: calc(100vw - 2rem) !important;
    justify-content: center;
}
.site-nav .nav-actions { display: flex !important; }
.site-nav .nav-brand {
    width: var(--nav-height) !important;
    min-width: var(--nav-height) !important;
    padding-inline: 0 !important;
    justify-content: center !important;
}
.site-nav .nav-brand .brand-name { display: none; }

/* The blog theme uses html { font-size: 62.5% }, so rem units in the copied nav render at 10px
   instead of 16px. Scale the nav by 1.6 to match the main site. */
.site-nav { zoom: 1.6; }
body { padding-top: 8.5rem; }
@media (max-width: 480px) {
    .site-nav { zoom: 1.2; }
    body { padding-top: 7rem; }
}