@layer chrome {
  .skip-link {
    position: absolute;
    left: var(--sp-4);
    top: var(--sp-4);
    z-index: calc(var(--z-modal) + 1);
    padding: var(--sp-2) var(--sp-4);
    background: var(--color-surface);
    border: var(--bw-hairline) solid var(--color-border);
    border-radius: var(--r-sm);
    transform: translateY(-160%);
    transition: transform var(--dur-2) var(--ease-standard);
  }

  .skip-link:focus {
    transform: none;
  }

  .header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    height: var(--header-h);
    background: var(--color-bg);
    transition:
      transform var(--dur-3) var(--ease-standard),
      box-shadow var(--dur-2) var(--ease-standard);
  }

  .header--scrolled {
    box-shadow: 0 var(--bw-hairline) 0 var(--color-border);
  }

  .header--hidden {
    transform: translateY(-100%);
  }

  .header__inner {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    height: var(--header-h);
    min-width: 0;
  }

  .header__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    text-decoration: none;
    flex-shrink: 0;
  }

  .header__mark {
    display: block;
    width: 1.5rem;
    height: 2rem;
    flex-shrink: 0;
  }

  .header__word {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-display);
  }

  .header__nav {
    display: none;
  }

  .header__nav ul {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
  }

  .header__nav a {
    position: relative;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-decoration: none;
    white-space: nowrap;
  }

  .header__nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.35em;
    height: 2px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-2) var(--ease-standard);
  }

  .header__nav a:hover::after,
  .header__nav a:focus-visible::after {
    transform: scaleX(1);
  }

  .header__nav a[aria-current="page"] {
    color: var(--color-text-muted);
  }

  .header__contact {
    display: none;
    align-items: center;
    gap: var(--sp-4);
    margin-left: auto;
  }

  .header__phones {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
    text-decoration: none;
  }

  .header__phone {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    white-space: nowrap;
  }

  .header__email {
    display: none;
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    text-decoration: none;
    white-space: nowrap;
  }

  .header__socials {
    display: flex;
    gap: var(--sp-1);
  }

  .header__burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2.75rem;
    height: 2.75rem;
    margin-left: auto;
    padding: var(--sp-2);
  }

  .header__burger span {
    display: block;
    height: 1.5px;
    width: 1.25rem;
    margin-inline: auto;
    background: var(--color-text);
    transition: transform var(--dur-3) var(--ease-standard), opacity var(--dur-2) var(--ease-standard);
  }

  .header__burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }

  .header__burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .header__burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }

  .menu {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-header) - 1);
    display: flex;
    flex-direction: column;
    padding: calc(var(--header-h) + var(--sp-8)) var(--gutter) var(--sp-8);
    background: var(--color-bg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity var(--dur-3) var(--ease-standard),
      visibility var(--dur-3) var(--ease-standard);
  }

  .menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .menu__nav {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-bottom: var(--sp-10);
  }

  .menu__nav a {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: var(--fw-medium);
    text-decoration: none;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity var(--dur-3) var(--ease-standard),
      transform var(--dur-3) var(--ease-standard);
    transition-delay: calc(var(--i, 0) * 40ms);
  }

  .menu.is-open .menu__nav a {
    opacity: 1;
    transform: none;
  }

  .menu__contacts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }

  .menu__contacts .header__phone {
    font-size: var(--fs-h3);
  }

  .reader-bar {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    display: grid;
    grid-template-columns: 2.75rem 1fr 2.75rem;
    align-items: center;
    height: var(--header-h);
    padding-inline: max(var(--gutter), calc((100% - var(--reading-max)) / 2));
    background: var(--color-bg);
    box-shadow: 0 var(--bw-hairline) 0 var(--color-border);
  }

  .reader-bar__back {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    color: inherit;
    text-decoration: none;
  }

  .reader-bar__back svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .reader-bar__label {
    text-align: center;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
  }

  .footer {
    padding-block: var(--section-y);
    background: var(--color-surface);
    border-top: var(--bw-hairline) solid var(--color-border);
  }

  .footer__inner {
    display: grid;
    gap: var(--sp-10);
  }

  .footer__phone {
    display: inline-block;
    margin-top: var(--sp-6);
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-display);
    line-height: var(--lh-heading);
    text-decoration: none;
  }

  .footer__email,
  .footer__address {
    display: block;
    margin-top: var(--sp-3);
    font-size: var(--fs-lead);
  }

  .footer__place {
    text-decoration: underline;
    text-underline-offset: 0.18em;
  }

  .footer__socials {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-6);
  }

  .footer__legal {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    margin-top: var(--sp-6);
  }

  .footer__mark {
    display: block;
    width: min(11rem, 50vw);
    height: auto;
    opacity: 0.92;
  }

  .widget {
    position: fixed;
    right: var(--gutter);
    bottom: var(--gutter);
    z-index: var(--z-widget);
  }

  html:has(.menu.is-open) .widget {
    display: none;
  }

  .widget__btn {
    width: 2.5rem;
    height: 2.5rem;
    animation: widget-pulse 2s var(--ease-standard) infinite;
  }

  @media (prefers-reduced-motion: reduce) {
    .widget__btn {
      animation: none;
    }

    .menu__nav a {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

  .widget__tip {
    position: absolute;
    right: calc(100% + var(--sp-3));
    top: 50%;
    transform: translateY(-50%);
    padding: var(--sp-2) var(--sp-3);
    background: var(--color-text);
    color: var(--color-text-inverse);
    font-size: var(--fs-xs);
    border-radius: var(--r-sm);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-2) var(--ease-standard);
  }

  .widget:hover .widget__tip,
  .widget:focus-within .widget__tip {
    opacity: 1;
  }

  @media (min-width: 48rem) {
    .footer__inner {
      grid-template-columns: 1fr auto;
      align-items: end;
    }
  }

  @media (min-width: 60rem) {
    .header__nav {
      display: block;
      margin-left: var(--sp-6);
      min-width: 0;
    }

    .header__contact {
      display: flex;
    }

    .header__phones,
    .header__socials {
      display: none;
    }

    .header__burger,
    .menu {
      display: none;
    }
  }

  @media (min-width: 72rem) {
    .header__phones {
      display: flex;
    }

    .header__nav ul {
      gap: var(--sp-5);
    }
  }

  @media (min-width: 75rem) {
    .header__email {
      display: block;
    }

    .header__phones {
      text-decoration: none;
    }
  }

  @media (min-width: 80rem) {
    .header__socials {
      display: flex;
    }

    .header__nav {
      margin-left: var(--sp-8);
    }

    .header__nav ul {
      gap: var(--sp-6);
    }
  }
}