:root {
  --site-header-height: calc(var(--size-tap-target) + 2 * var(--space-16));
}

.site-header {
  background: var(--color-ink);
  color: var(--color-on-ink);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  min-height: var(--site-header-height);
}

.site-header :focus-visible,
.site-menu :focus-visible {
  outline-color: var(--color-accent-on-dark);
}


.site-header__actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-24);
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.site-header__link {
  --selection-color: var(--color-accent-on-dark);
  --selection-color-pressed: var(--color-accent-on-dark);
  --selection-handle-fill: var(--color-ink);
  --selection-width-pressed: var(--selection-stroke);
  --selection-inset-x: 0px; /* check:ignore */
  --selection-inset-y: 0px; /* check:ignore */
  position: relative;
  padding: var(--space-12);
  font-weight: 500;
  font-size: var(--font-size-ui);
  line-height: var(--line-height-ui);
  text-decoration: none;
}

.site-header__link:has(> .selection):focus-visible,
.site-header__link:has(> .selection):active {
  outline-color: transparent;
}

.site-header__link:has(> .selection):active {
  background: var(--color-ink-raised);
}

.site-header__divider {
  width: 1px;
  height: 20px;
  background: var(--color-ink-border);
}

.nav-cv-button {
  --selection-color: var(--color-accent-on-dark);
  --selection-color-pressed: var(--color-accent-on-dark);
  --selection-handle-fill: var(--color-ink);
  --selection-inset-x: 1px;
  --selection-inset-y: 1px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--size-tap-target);
  padding-inline: var(--space-12);
  border: 1px solid var(--color-ink-border);
  border-radius: var(--radius-control);
  color: var(--color-on-ink);
  font-weight: 500;
  font-size: var(--font-size-ui);
  line-height: var(--line-height-ui);
  text-decoration: none;
}

.nav-cv-button:has(> .selection) {
  transition: border-radius var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
  .nav-cv-button:has(> .selection):hover {
    border-radius: 0;
  }
}

.nav-cv-button:has(> .selection):focus-visible {
  border-radius: 0;
  outline-color: transparent;
}

.nav-cv-button:has(> .selection):active {
  background: var(--color-ink-raised);
  outline-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .nav-cv-button:has(> .selection):active {
    border-radius: 0;
  }
}

.menu-button {
  --selection-color: var(--color-accent-on-dark);
  --selection-color-pressed: var(--color-accent-on-dark);
  --selection-handle-fill: var(--color-ink);
  --selection-width-pressed: var(--selection-stroke);
  --selection-inset-x: 1px;
  --selection-inset-y: 1px;
  position: relative;
  display: grid;
  place-items: center;
  width: var(--size-tap-target);
  height: var(--size-tap-target);
  padding: 0;
  border: 1px solid var(--color-ink-border);
  border-radius: var(--radius-control);
  background: var(--color-ink);
  color: var(--color-on-ink);
  cursor: pointer;
}

.site-header__burger {
  background: var(--color-ink-raised);
}

.menu-button:has(> .selection) {
  transition:
    border-radius var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
  .menu-button:has(> .selection):hover {
    border-radius: 0;
  }
}

.menu-button:has(> .selection):focus-visible {
  border-radius: 0;
}

.menu-button:has(> .selection):focus-visible,
.menu-button:has(> .selection):active {
  outline-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .menu-button:has(> .selection):active {
    border-radius: 0;
  }
}

.menu-button:has(> .selection):active {
  background: var(--color-ink-raised);
}

.site-header__burger:has(> .selection):active {
  background: var(--color-ink-border);
}

.site-menu {
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--color-ink);
  color: var(--color-on-ink);
  flex-direction: column;

  --menu-origin: calc(100% - var(--layout-gutter) - var(--size-tap-target) / 2)
                 calc(var(--site-header-height) / 2);
  --menu-closed: circle(calc(var(--size-tap-target) / 2) at var(--menu-origin));
  --menu-open: circle(hypot(100vw, 100dvh) at var(--menu-origin));
  clip-path: var(--menu-closed);
  transition:
    clip-path var(--duration-slow) var(--ease-out),
    display var(--duration-slow) allow-discrete,
    overlay var(--duration-slow) allow-discrete;
}

.site-menu:popover-open {
  display: flex;
  clip-path: var(--menu-open);
  animation: site-menu-open var(--duration-slow) var(--ease-out);
}

@keyframes site-menu-open {
  from {
    clip-path: var(--menu-closed);
  }
}

.site-menu[data-closing] {
  animation: site-menu-close var(--duration-slow) var(--ease-out) forwards;
  transition: none;
}

@keyframes site-menu-close {
  to {
    clip-path: var(--menu-closed);
  }
}

.site-menu:focus {
  outline-color: transparent;
}

.site-menu__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-48);
  padding: var(--space-32) var(--layout-gutter);
}

.site-menu__nav {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
}

.site-menu__link {
  --selection-color: var(--color-accent-on-dark);
  --selection-color-pressed: var(--color-accent-on-dark);
  --selection-handle-fill: var(--color-ink);
  --selection-width-pressed: var(--selection-stroke);
  --selection-inset-x: var(--space-8);
  --selection-inset-y: calc(-1 * var(--space-4));
  position: relative;
  isolation: isolate;
  padding-block: var(--space-8);
  color: var(--color-on-ink);
  font-family: var(--font-heading);
  font-weight: 600;
  font-variation-settings: "FLAR" 50;
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-tight);
  text-decoration: none;
}

.site-menu__link:has(> .selection)::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--selection-inset-y)) calc(-1 * var(--selection-inset-x));
  z-index: -1;
}

.site-menu__link:has(> .selection):focus-visible,
.site-menu__link:has(> .selection):active {
  outline-color: transparent;
}

.site-menu__link:has(> .selection):active::before {
  background: var(--color-ink-raised);
}

.site-menu__language {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-ink-border);
}

.site-menu__language-label {
  color: var(--color-on-ink-secondary);
}

@media (width < 768px) {
  .site-header__actions {
    gap: var(--space-8);
  }

  .site-header__link,
  .site-header__divider,
  .site-header__lang {
    display: none;
  }

  body:has(.site-menu:popover-open) {
    overflow: hidden;
  }
}

@media (width >= 768px) {
  .site-header__burger,
  .site-menu:popover-open {
    display: none;
  }
}