@layer style {

  :root {
    --border-radius: 16px;
    --padding-block: var(--size-2);
    --clickable-area: 48px;
    --animation-defaults: 0.3s ease-in-out;
    --scroll-item-appearance: 2%;
  }

  header,
  div:has(nav),
  address ul {
    display: block flex;
    align-items: center;
    justify-content: space-between;
  }

  a {
    color: currentColor;
  }

  nav ul {
    display: block flex;
    gap: var(--size-2);
    line-height: var(--line-height);

    & li {
      max-inline-size: min-content;
      text-align: center;
    }

    & a {
      display: block;
      min-inline-size: var(--clickable-area);
      block-size: max(var(--clickable-area), 100%);
    }
  }

  header a,
  nav ul {
    font-size: var(--standard-font-size);
  }

  img[src*="logo-go.svg"] {
    inline-size: calc(var(--fluid-font-size-1) * 3);
  }

  body {
    font-family: system-ui, sans-serif;
    font-size: 105%;
    line-height: 1.5;
  }

  header {
    --padding-inline: var(--size-2);

    position: relative;
    gap: var(--size-2);
    padding-block: var(--padding-block);
    padding-inline: var(--padding-inline);
    container-type: inline-size;

    & #menu-btn {
      display: none;
    }

    & #menu {
      inset-inline-start: unset;
      inset-inline-end: var(--size-2);
      display: block flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--size-2);
      padding: 0;
      border: none;
      block-size: auto;
      inline-size: 73%;
      overflow-x: clip;
    }

    & #theme {
      display: block flex;
      justify-content: flex-end;
      block-size: var(--clickable-area);
      inline-size: var(--clickable-area);
      cursor: pointer;

      & svg {
        inline-size: calc(var(--fluid-font-size-1)* 2.3);
      }

      & svg rect {
        fill: none;
      }

      & input {

        padding: 0;
        outline: none;
        appearance: none;
        pointer-events: none;
      }
    }

    &::after {
      --_inset-size: var(--size-1);

      content: '';
      position: absolute;
      inset-inline: calc(var(--padding-inline) + var(--_inset-size));
      inset-block-end: var(--_inset-size);
      border-bottom: 1px solid currentColor;
      opacity: 0.7;
    }

    @container (721px <=inline-size <=1250px) {

      & #menu {
        inline-size: max(620px, 80cqi);
      }
    }

    @container (inline-size <=720px) {

      & #menu-btn {
        --_menu-line-width: 40px;
        --_menu-line-height: var(--size-0);
        --_menu-gap: 6px;
        --_menu-border-radius: 20px;
        --_foreground: hsl(0 7% 24%);

        position: relative;
        display: block flex;
        flex-direction: column;
        justify-content: center;
        gap: var(--_menu-gap);
        block-size: 48px;
        inline-size: max-content;
        cursor: pointer;
        transition: transform var(--animation-defaults);

        & span,
        &::before,
        &::after {
          content: "";
          border-radius: var(--_menu-border-radius);
          inline-size: var(--_menu-line-width);
          block-size: var(--_menu-line-height);
          background-color: var(--_foreground);
          transform-origin: right center;
          transition:
            rotate var(--animation-defaults),
            transform var(--animation-defaults),
            opacity var(--animation-defaults);
        }
      }

      &:has(#menu:popover-open) #menu-btn {
        transform: translateX(-25%);

        & span {
          opacity: 0;
          transform: translate(11px, 7px) rotate(45deg);
        }
      }

      &:has(#menu:popover-open) #menu-btn::before {
        border-radius: 0 var(--_menu-border-radius);
        transform: translateX(3px) rotate(-50deg);
      }

      &:has(#menu:popover-open) #menu-btn::after {
        border-radius: var(--_menu-border-radius) 0;
        transform: translateX(4px) rotate(45deg);
      }

      & #menu {
        --_menu-background: hsl(0 0 100%);
        --_light-color: oklch(from Canvas calc(l - 0.3) c h / .5);
        --_dark-color: oklch(from Canvas calc(l - 0.6) c h / .5);

        inset-inline-end: 62px;
        flex-direction: column-reverse;
        justify-content: flex-end;
        padding-block-start: var(--padding-block);
        block-size: 100vb;
        inline-size: min(320px, 65cqi);
        background-color: var(--_menu-background);
        transform: translateX(120%);
        opacity: 0;
        transition: transform var(--animation-defaults), opacity var(--animation-defaults);

        & nav ul {
          flex-direction: column;
          gap: var(--size-0);
        }

        & nav li {
          inline-size: 100%;
          max-inline-size: unset;
          text-align: unset;
        }

        & #theme {
          justify-content: center;
          inline-size: 100%;
        }

        &::backdrop {
          background-color: light-dark(var(--_light-color), var(--_dark-color));
        }

        @supports not(background-color: light-dark(var(--_light-color), var(--_dark-color))) {

          &::backdrop {
            background-color: var(--_dark-color);
          }
        }

        &:popover-open {
          opacity: 1;
          transform: translateX(0);
        }
      }

      & a {
        padding-block: calc(var(--size-2) - 2px);
        font-weight: 500;
        white-space: nowrap;
      }
    }
  }

  main {
    --hero-height: 500px;

    position: relative;
    container: main / inline-size;

    & h1 {
      --_heading-inline-size: 1200px;

      position: absolute;
      inset-block-start: calc(var(--hero-height) - var(--size-6) * 3);
      inset-inline: clamp(var(--size-3), 6vi, var(--size-5));
      z-index: 1;
      margin-inline: auto;
      max-inline-size: var(--_heading-inline-size);
      font-weight: 800;
      text-wrap: nowrap;
      text-shadow: 1px 0px 1px hsl(44 100% 50%), -3px -3px 1px hsl(44 100% 50%);
      backdrop-filter: blur(1px);
      pointer-events: none;

      & span {
        display: block flow;
        font-weight: 600;
        font-size: clamp(1.5rem, 4vi, 2.7rem);
        line-height: var(--line-height);
        text-wrap: wrap;
        text-shadow: 1px 0px 1px hsl(44 100% 50%), -2px -2px 1px hsl(44 100% 50%);
      }
    }

    & article:not(:nth-of-type(1)):not(:nth-of-type(2)) {
      border: 2px solid currentColor;
      block-size: 600px;
    }

    & article:not(:last-of-type) {
      margin-block-end: var(--size-3);
    }
  }

  #hero {
    container: hero / inline-size;
    margin-block-end: var(--size-3);
    overflow-x: clip;

    & ul {
      --_img-border-width: 2px;
      --_border-line-color: solid transparent;

      position: relative;
      display: block flex;
      block-size: var(--hero-height);
      overflow-y: clip;

      & li {
        flex: 1;
        border-inline: var(--_img-border-width) var(--_border-line-color);
        transition: flex var(--animation-defaults), border var(--animation-defaults);

        & img {
          border-radius: var(--border-radius);
          opacity: 0.9;
          transition: opacity var(--animation-defaults);
        }
      }

      & li:first-child {
        border-inline-start: none;

        & img {
          border-radius: 0 var(--border-radius) var(--border-radius) 0;
        }

        &:hover {
          border-inline-start: calc(var(--_img-border-width) * 2) var(--_border-line-color);
        }

        &:hover img {
          border-radius: var(--border-radius);
          transition:
            border-radius var(--animation-defaults),
            border-inline-start var(--animation-defaults),
            opacity var(--animation-defaults);
        }
      }

      & li:last-child {
        border-inline-end: none;

        & img {
          border-radius: var(--border-radius) 0 0 var(--border-radius);
        }

        &:hover {
          border-inline-end: calc(var(--_img-border-width) * 2) var(--_border-line-color);
        }

        &:hover img {
          border-radius: var(--border-radius);
          transition:
            border-radius var(--animation-defaults),
            border-inline-end var(--animation-defaults),
            opacity var(--animation-defaults);
        }
      }

      & li:hover {
        flex-grow: 2;

        & img {
          opacity: 1;
        }
      }

      & :where(picture, img) {
        block-size: 100%;
      }

      & img {
        inline-size: 100%;
        object-fit: cover;
      }
    }

    @container hero (inline-size <=1024px) {

      & ul {
        inline-size: 100%;
        overflow-x: auto;
        scroll-snap-type: inline mandatory;
        scrollbar-width: thin;

        & li,
        & li:hover {
          flex: 0 0 calc(100% - var(--scroll-item-appearance));
          scroll-snap-align: start;
          scroll-snap-stop: always;
        }

        & li:first-child img,
        & li:last-child img {
          border-radius: var(--border-radius);
        }

        & li:first-child:hover {
          border-inline-start: none;
        }

        & li:last-child:hover {
          border-inline-end: none;
        }
      }
    }
  }

  #about {
    --_descr-max-height: 400px;
    --_logo-width: clamp(280px, 40vi, 400px);
    --_title-font-size: calc(var(--fluid-font-size-2) * 0.8);

    container: about / inline-size;
    display: block grid;
    grid-template-columns: var(--_logo-width) 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "head head"
      "logo subhead"
      "logo descr"
      "photo photo";
    gap: var(--size-2);

    & h2 {
      grid-area: head;
    }

    &>picture {
      grid-area: logo;
      margin-inline-start: -2px;
      inline-size: var(--_logo-width);
    }

    & h3 {
      grid-area: subhead;
      block-size: 0;
      font-size: var(--_title-font-size);
      line-height: var(--line-height);
    }

    & .about-descr {
      grid-area: descr;
      block-size: clamp(260px, 35vi, 400px);
      overflow-y: auto;
      scrollbar-width: none;
    }

    & :where(h3, .about-descr) {
      inline-size: 75%;
    }

    @container about (inline-size <=1060px) {

      & :where(h3, .about-descr) {
        inline-size: unset;
      }
    }

    & ul {
      grid-area: photo;
      display: block flex;
      gap: var(--size-1);
      max-block-size: var(--hero-height);
      overflow-x: auto;
      scroll-snap-type: inline mandatory;
      scrollbar-width: thin;

      & li {
        position: relative;
        flex: 0 0 calc(100% - var(--scroll-item-appearance));
        border: 2px solid currentColor;
        border-radius: var(--border-radius);
        padding: var(--size-1);
        scroll-snap-align: start;
        scroll-snap-stop: always;

        & :where(picture, img) {
          block-size: 100%;
        }
      }

      & li:first-child {
        display: block flex;
        justify-content: center;
        align-items: center;
        gap: var(--size-1);

        & div {
          text-align: center;
        }

        & h4 {
          margin-block-end: var(--size-2);
          font-size: var(--_title-font-size);
        }

        & :where(div, picture) {
          flex: 1;
        }

        & p {
          position: relative;
        }

        & span {
          position: relative;
          display: block;
        }

        & span:not(:last-of-type) {
          --_line-between-width: 200px;

          margin-block-end: var(--size-1);

          &::after {
            content: "";
            position: absolute;
            inset-block-end: -6px;
            inset-inline: 0;
            margin-inline: auto;
            border-radius: 50%;
            inline-size: var(--_line-between-width);
            block-size: var(--size-0);
            background-color: currentColor;
            opacity: 0.9;
          }
        }
      }

      & img {
        inline-size: 100%;
        border-radius: var(--border-radius);
        object-fit: cover;
      }
    }

    @container about (inline-size <=460px) {

      & ul li {
        --scroll-item-appearance: 5%;
      }

      & ul li:first-child {
        flex-direction: column-reverse;

        & picture {
          inline-size: 100%;
          block-size: 35%;
        }

        & h4 {
          font-size: 1rem;
        }

        & p {
          font-size: 0.8rem;
        }
      }
    }
  }

  @container main (inline-size <=680px) {

    #about {
      grid-template-columns: 1fr;
      grid-template-areas:
        "head"
        "subhead"
        "descr"
        "logo"
        "photo";

      & h3 {
        block-size: auto;
      }

      &>picture {
        justify-self: center;
      }

      & .about-descr {
        block-size: clamp(210px, 30vi, 235px);
      }
    }
  }

  footer {
    padding-block-end: var(--padding-block);
    container-type: inline-size;

    & address {
      display: block flex;
      justify-content: space-between;

      & a {
        display: block;
        min-inline-size: var(--clickable-area);
        min-block-size: var(--clickable-area);
      }
    }

    & #map {
      --_map-gap: var(--size-3);

      gap: var(--_map-gap);

      & div {
        --_block-size: 400px;

        border: 2px solid currentColor;
        border-radius: var(--border-radius);
        block-size: var(--_block-size);

        &:first-of-type {
          inline-size: calc(70% - var(--_map-gap));

          & iframe {
            border: 0;
            inline-size: 100%;
          }
        }

        &:last-of-type {
          display: block flex;
          flex-direction: column;
          justify-content: space-evenly;
          align-items: center;
          gap: var(--size-1);
          padding: var(--size-1);
          inline-size: 30%;

          & img {
            border-radius: var(--border-radius);
            inline-size: min(265px, 80%);
          }

          & p {
            inline-size: 80%;
            font-weight: 600;
            font-size: 1.25rem;
          }
        }
      }

      &:last-of-type {
        font-size: var(--standard-font-size);

        & p {
          inline-size: min(560px, 100%);
          font-size: clamp(0.7rem, 2vw, 1rem);
          ;
        }
      }
    }

    & div:has(nav) {
      padding-block-start: var(--size-3);

      & img[src*="logo-go.svg"] {
        inline-size: calc(var(--fluid-font-size-1) * 4);
      }

      & nav ul {
        font-size: calc(var(--fluid-font-size-1) - 0.2rem);
      }

      & address ul {
        gap: var(--size-0);

        & svg {
          inline-size: clamp(37px, 3vi, 40px);
        }

        & .tel path:last-of-type {
          transform: translate(7px, 9px);
        }
      }

      & address a {
        display: block flex;
        align-items: center;
        justify-content: center;
      }
    }

    & #organization {

      & p {
        inline-size: min(560px, 100%);
        font-size: clamp(0.7rem, 1.7vi, 1rem);
      }

      & a {
        padding-inline-end: var(--size-1);
      }
    }

    @container (max-inline-size: 768px) {

      & #map {
        --_map-gap: var(--size-2);

        flex-wrap: wrap;

        & div:first-of-type {
          inline-size: 100%;
        }

        & div:last-of-type {
          flex-direction: row;
          inline-size: 100%;
          block-size: calc(var(--_block-size) / 2.4);

          & img {
            inline-size: min(175px, 50%);
          }

          & p {
            font-size: clamp(1rem, 3vi, 1.25rem);
          }
        }
      }

      & div:has(nav) {

        & nav {
          display: none;
        }

        & address {
          align-self: flex-start;
        }
      }

      & #organization {
        flex-direction: column-reverse;
        transform: translateY(calc(var(--size-2) * -1));

        & p {
          transform: translateY(calc((var(--size-1) + 4px) * -1));
        }

        & a {
          align-self: flex-end;
        }
      }
    }
  }
}