:root {
      --font-ui: "IBM Plex Sans", sans-serif;
      --font-mono: "IBM Plex Mono", monospace;

      --bg: #f2f2f0;
      --surface: #fcfaf7;
      --text: #171717;
      --muted: #6b655e;
      --accent: #2f5d4b;
      --border: rgba(23, 23, 23, 0.12);

      /* layout */
      --page-width: 1440px;
      --page-margin: 2.25rem;
      --grid-columns: 12;
      --grid-gap: 1.6rem;
      --project-spacing: 20px;
      --home-block-spacing: 80px;
      --home-caption-spacing: 8px;
      --header-height: 56px;
      --showreel-height-offset: -20px;

      /* typography */
      --text-xs: 11px;
      --text-sm: 13px;
      --text-md: 16px;
      --text-lg: 19px;
      --text-xl: 23px;
      --text-2xl: 28px;
      --text-3xl: 33px;
      --text-4xl: 40px;

      --leading-tight: 1.08;
      --leading-heading: 1.4;
      --leading-ui: 1.25;
      --leading-body: 1.45;

    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      background: #f2f2f0;
      overscroll-behavior-y: none;
    }

    body {
      margin: 0;
      font-family: var(--font-ui);
      color: var(--text);
      line-height: 1.6;

      background: transparent;
    }

    .page-wrapper {
      min-height: 100vh;

      display: flex;
      flex-direction: column;

      background: #f2f2f0;
    }

    img {
      max-width: 100%;
      display: block;
    }

    .container {
        position: relative;

        width: min(
            var(--page-width),
            calc(100% - var(--page-margin) * 2)
        );

        margin-inline: auto;
    }

    .container::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 2;

        background-image:
            repeating-linear-gradient(
                to right,
                rgba(255,0,0,.12) 0,
                rgba(255,0,0,.12)
                calc((100% - (11 * var(--grid-gap))) / 12),
                transparent
                calc((100% - (11 * var(--grid-gap))) / 12),
                transparent
                calc(
                    ((100% - (11 * var(--grid-gap))) / 12)
                    + var(--grid-gap)
                )
            );
    }

    .grid {
      display: grid;

      grid-template-columns:
        repeat(var(--grid-columns), minmax(0, 1fr));

      column-gap: var(--grid-gap);
    }

    .site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1003;

        mix-blend-mode: difference;
        isolation: isolate;
    }

    .site-header::before {
        display: none;
    }

    .nav {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      padding: 1rem 0;
      min-height: 3.5rem;
    }


  .lang-switcher {
    display: flex;
    justify-self: end;
    align-items: center;
    gap: 1.25rem;
    margin-right: 0;
    white-space: nowrap;
  }

    .brand,
    .nav-item,
    .site-footer a,
    .lang-btn {
      text-decoration: none;
      color: #9F9F9F;
    }

    .brand {
      position: relative;
      display: inline-block;
      padding-bottom: 0.2rem;
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: normal;
      line-height: var(--leading-ui);
      justify-self: start;
      margin-left: 0;
    }

    .brand.nav-item:hover,
    body[data-page="home"] .brand.nav-item {
      opacity: 1;
    }

    .nav-links {
      display: flex;
      justify-self: center;
      gap: 1.5rem;
      white-space: nowrap;
    }

    .nav-item {
      position: relative;
      padding-bottom: 0.2rem;
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: normal;
      line-height: var(--leading-ui);
      color: #ffffff;
      opacity: 0.8;
      transition: opacity 180ms ease;
    }

    .nav-item:hover,
    .nav-item.active:not(.lang-btn) {
      opacity: 1;
    }

    @keyframes navUnderlineIn {
      from {
        transform: scaleX(0);
      }
      to {
        transform: scaleX(1);
      }
    }


    .nav-item::after,
    .lang-btn::after,
    .brand::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0.05rem;
      width: 100%;
      height: 1px;
      background: currentColor;

      transform: scaleX(0);
      transform-origin: left center;
    }

    .nav-item.animate:not(.lang-btn)::after,
    .brand.animate::after,
    .lang-btn.animate::after {
        animation: navUnderlineIn 220ms ease forwards;
    }

    .nav-item.active:not(.lang-btn)::after,
    .brand.active::after,
    .lang-btn.lang-active::after {
        transform: scaleX(1);
    }

    .work-filter-section {
        margin-top: calc(
            var(--header-height)
            + var(--project-spacing)
        );
    }

    .work-grid-section {
        margin-top: var(--project-spacing);
    }

    .work-filter-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;

        min-height: auto;
    }

    .work-filter {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }


    .work-filter-item {
        padding: 6px 11px;
        border-radius: 4px;

        font-family: var(--font-mono);
        font-size: var(--text-xs);
        font-weight: 400;
        line-height: var(--leading-ui);
        text-transform: uppercase;
        text-decoration: none;

        background: transparent;
        border: 1px solid rgba(23, 23, 23, 0.18);
        color: #6B655E;

        transition:
            border-color 160ms ease,
            color 160ms ease;
    }

    .work-filter-item:hover {
        border-color: rgba(23, 23, 23, 0.45);
        color: #171717;
    }
    .work-filter-item.active {
        background: transparent;
        border-color: #171717;
        color: #171717;
    }

    /* DESKTOP — larger work filters */

      .work-filter-item {
          padding: 8px 14px;
          font-size: 13px;
          line-height: 1;
          border-radius: 7px;
      }

    @media (min-width: 761px) {
      .lang-slash {
        color: #ffffff;
      }
    }

    .lang-btn {
      background: transparent;
      padding: 0.2rem 0;
      cursor: pointer;
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: normal;
      line-height: var(--leading-ui);
      opacity: 0.8;
      transition: opacity 180ms ease;
      position: relative;
      display: inline-block;
    }

    .lang-btn:hover,
    .lang-btn.lang-active {
        opacity: 1;
    }

    .hero-block {
        padding-top: calc(
            var(--header-height)
            + var(--project-spacing)
        );
        padding-bottom: 0;
    }

    .hero-container {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: var(--grid-gap);

        align-items: end;
    }


    .hero-photo {
        grid-column: 1 / 3;

        width: 100%;
        height: auto;

        align-self: end;
        justify-self: stretch;

        object-fit: cover;
    }

    .hero-copy {
        grid-column: 3 / 11;

        align-self: end;
    }

    .hero-copy p {
        margin: 0;
        font-size: clamp(2.7rem, 1.8vw, 4rem);
        line-height: var(--leading-ui);
    }

    @media (max-width: 1440px) {
        .hero-copy p {
            font-size: 2.6rem;
        }
    }

    @media (max-width: 1200px) {
        .hero-copy p {
            font-size: 2.2rem;
        }
    }

    @media (max-width: 1024px) {
        .hero-copy p {
            font-size: 2rem;
        }
    }

    .hero-copy .accent {
        text-decoration: underline;
        text-underline-offset: 0.08em;
    }
    .projects-container {
        position: relative;

        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: var(--grid-gap);
        row-gap: 0;

        margin-top: var(--project-spacing);
    }

    @media (min-width: 761px) {

        .calendar-project {
            margin-top: 0;
        }

        .project-potanin-small,
        .project-potanin-large,
        .project-passengers,
        .project-sculpture,
        .project-book,
        .project-calendar-page,
        .project-book-full,
        .project-portraits-left,
        .project-portraits-right,
        .project-yakut,
        .project-podvorie {
            margin-top: var(--home-block-spacing);
        }
    }

    .project-card {
        display: block;
    }

    .calendar-project {
        grid-column: 1 / 13;
    }

    .calendar-project img {
        width: 100%;
        height: auto;
        display: block;
    }

    .project-potanin-small {
        grid-column: 1 / 4;
        align-self: start;
        
    }

    .project-potanin-large {
        grid-column: 6 / 13;
        
    }

    .project-potanin-large .project-title {
        margin-top: 12px;
    }

    .project-potanin-caption {
        grid-column: 6 / 13;
        margin-top: 12px;

        font-family: var(--font-mono);
        font-size: var(--text-xs);
        color: var(--muted);
    }

    .project-passengers {
        grid-column: 3 / 7;

    }

    .project-sculpture {
        grid-column: 7 / 10;
    }

    .project-passengers img,
    .project-sculpture img {
        width: 100%;
        display: block;
    }

    .project-passengers-caption {
        grid-column: 3 / 7;
    }

    .project-sculpture-caption {
        grid-column: 7 / 10;
    }

    .project-passengers-caption,
    .project-sculpture-caption {
        margin-top: 12px;

        font-family: var(--font-mono);
        font-size: var(--text-xs);
        color: var(--muted);
    }

    .project-book {
        grid-column: 1 / 5;
        align-self: start;
    }

    .project-book img {
        width: 100%;
        display: block;
    }

    .project-book p {
        margin-top: 12px;

        font-family: var(--font-mono);
        font-size: var(--text-xs);
        color: var(--muted);
    }


    .project-calendar-page {
        grid-column: 8 / 13;
        align-self: start;

    }

    .project-calendar-page img {
        width: 100%;
        display: block;
    }

    .project-calendar-page p {
        margin-top: 12px;

        font-family: var(--font-mono);
        font-size: var(--text-xs);
        color: var(--muted);
    }

    .project-book-full {
        grid-column: 1 / 13;
        align-self: start;
    }

    .project-book-full img {
        width: 100%;
        height: auto;
        display: block;
    }

    .project-book-full p {
        margin-top: 12px;

        font-family: var(--font-mono);
        font-size: var(--text-xs);
        color: var(--muted);
    }

    /* Серия портретов */
    .project-portraits-left {
        grid-column: 2 / 5;

    }

    .project-portraits-right {
        grid-column: 5 / 7;
        
    }

    .project-portraits-caption {
        grid-column: 2 / 7;
        margin-top: 12px;

        font-family: var(--font-mono);
        font-size: var(--text-xs);
        color: var(--muted);
    }

    /* Якутское кино */
    .project-yakut {
        grid-column: 4 / 7;
        
    }

    .project-yakut-caption {
        grid-column: 4 / 7;
        margin-top: 12px;

        font-family: var(--font-mono);
        font-size: var(--text-xs);
        color: var(--muted);
    }

    /* Подворье */
    .project-podvorie {
        grid-column: 7 / 13;
      
    }

    .project-podvorie-caption {
        grid-column: 7 / 13;
        margin-top: 12px;

        font-family: var(--font-mono);
        font-size: var(--text-xs);
        color: var(--muted);
    }

    .project-title {
        margin-top: 8px;
        margin-bottom: 0;

        font-family: var(--font-mono);
        font-size: var(--text-xs);
        font-weight: 400;
        line-height: var(--leading-ui);

        color: var(--muted);
        text-align: left;

        background: transparent;
    }

    .project-card img {
        width: 100%;
        height: auto;
        display: block;
    }

    .project-card:visited {
      color: inherit;
    }

    .project-card:hover {
      color: inherit;
    }

    h1,
    h2,
    h3 {
      line-height: 1.1;
      margin: 0 0 0.8rem;
    }

    h1 {
      font-size: clamp(2.2rem, 4vw, 3.6rem);
      max-width: 700px;
    }

    .lead,
    .about p {
      color: var(--muted);
      font-size: 1rem;
    }

    .showreel-intro h1 {
      max-width: 560px;
      margin-bottom: 1rem;
      font-size: clamp(2rem, 3.5vw, 3rem);
    }

    .page-content {
        padding-top: 0px; /* только компенсация fixed header */
    }

    .showreel-section {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        column-gap: var(--grid-gap);

        min-height: calc(
        100vh
        - var(--header-height)
        - var(--project-spacing)
        + var(--showreel-height-offset)
    );

        margin-top: calc(
            var(--header-height)
            + var(--project-spacing)
        );

        align-items: center;
    }

    .showreel-wrapper {
      grid-column: 2 / 12;
    }

    .vimeo-wrapper {
      position: relative;
      padding-top: 56.25%; /* 16:9 */
    }

    .vimeo-wrapper iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }

    .site-footer {
      background: #ffffff;
      padding: 4.5rem 0 4.75rem;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 1.4rem 1.6rem;
      align-items: start;
    }

    .footer-block {
      grid-column: span 2;
      min-width: 0;
    }

    .footer-block--bio {
      grid-column: span 2;
    }

    /* ==========================================================
    CONTACT PAGE — DESKTOP
    ========================================================== */

  .contact-page {
    padding-top: calc(var(--header-height) + 64px);
    padding-bottom: 100px; /* или 80px */
  }

  .contact-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: start;
  }

  .contact-title {
    grid-column: 2 / 8;

    margin: 0;

    font-family: var(--font-ui);
    font-size: clamp(4rem, 2.2vw, 5.8rem);
    font-weight: 400;
    line-height: var(--leading-ui);
    letter-spacing: normal;
  }

  .contact-block {
    margin-top: 80px;
  }

  .contact-direct {
    grid-column: 2 / 7;
  }

  .contact-socials {
    grid-column: 8 / 11;
  }

  .contact-label {
    margin: 0 0 12px;

    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.25;

    color: var(--muted);
  }

  .contact-block a {
    display: block;
    width: fit-content;

    margin: 0 0 8px;

    font-family: var(--font-ui);
    font-size: var(--text-lg);
    font-weight: 400;
    line-height: var(--leading-heading);
    letter-spacing: -0.01em;

    color: #9f9f9f;
    text-decoration: none;

    transition: color 0.2s ease;
  }

  .contact-block a:hover {
    color: #171717;
  }

    @media (max-width: 1024px) {
      .footer-grid {
        grid-template-columns: repeat(6, 1fr);
      }

      .footer-block,
      .footer-block--bio {
        grid-column: span 3;
      }
    }

    @media (max-width: 640px) {
      .footer-grid {
        grid-template-columns: 1fr;
      }

      .footer-block,
      .footer-block--bio {
        grid-column: span 1;
      }

      .site-footer {
        padding: 3rem 0;
      }
    }

    .footer-block h3 {
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 500;
      line-height: var(--leading-ui);
      letter-spacing: 0.02em;
      text-transform: uppercase;

      margin: 0 0 0.75rem;

      color: var(--text);
      text-align: left;
    }

    .footer-entry + .footer-entry {
      margin-top: 0.75rem;
    }

    .footer-entry p {
      font-family: var(--font-ui);
      font-size: var(--text-sm);
      font-weight: 400;
      line-height: 1.4;

      margin: 0;

      color: var(--muted);
      text-align: left;
    }

    .footer-entry p + p {
      margin-top: 0.15rem;
    }

    .footer-entry a {
      display: block;
      width: fit-content;

      font-family: var(--font-ui);
      font-size: var(--text-sm);
      font-weight: 400;
      line-height: 1.4;

      margin: 0;

      color: var(--muted);
      text-decoration: none;
    }

    .footer-entry a + a {
      margin-top: 0.15rem;
    }

    @media (max-width: 900px) {
      .footer-block--bio,
      .footer-block:nth-of-type(2),
      .footer-block:nth-of-type(3),
      .footer-block:nth-of-type(4),
      .footer-block:nth-of-type(5),
      .footer-block:nth-of-type(6) {
        grid-column: span 2;
      }
    }

    @media (max-width: 800px) {
      .hero,
      .about,
      .projects,
      .showreel-hero {
        grid-template-columns: 1fr;
      }

      .hero {
        padding-top: 3rem;
      }

      .showreel-intro,
      .showreel-video {
        grid-column: 1 / -1;
      }

      .footer-content {
        flex-direction: column;
        align-items: flex-start;
      }
    }

    @media (max-width: 640px) {
      .footer-block {
        grid-column: 1 / -1;
      }

      .site-footer {
        padding: 3rem 0 3.5rem;
      }
    }

    .work-projects {
        margin-top: 0;
    }

    .work-grid{
        display:grid;
        grid-template-columns:repeat(12,minmax(0,1fr));
        column-gap:var(--grid-gap);
        row-gap:40px;
    }

    .work-card {
        grid-column:span 6;
    }

    @media (min-width: 761px) {
        .work-card[href="project-tradition.html"] .work-title {
            width: calc((100% - 5 * var(--grid-gap)) / 1.8);
        }
    }

    .work-image {
        width: 100%;
        aspect-ratio: 4 / 3;
        background: rgba(120,80,80,.15);
    }

    .work-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .work-meta {
        margin-top: 18px;

        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 24px;
    }

    .work-title {
        margin: 0;

        font-family: var(--font-ui);
        font-size: var(--text-lg);
        font-weight: 500;
        line-height: var(--leading-heading);
        letter-spacing: -0.01em;

        color: var(--text);
    }

    .work-tags {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .work-tag {
        padding: 4px 8px;
        border-radius: 4px;

        font-family: var(--font-mono);
        font-size: var(--text-xs);
        font-weight: 400;
        line-height: 1;
        text-transform: uppercase;

        border: 1px solid rgba(23, 23, 23, 0.15);
        color: var(--muted);
    }

    .work-card,
    .work-card:visited,
    .work-card:hover,
    .work-card:active {
        text-decoration: none;
        color: inherit;
    }

    .project-page-title {
        margin: 0 0 0px;

        font-family: var(--font-ui);
        font-size: var(--text-2xl);
        font-weight: 500;
        line-height: 1.3;
        letter-spacing: -0.02em;

        color: var(--text);
    }

    .project-hero {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        column-gap: 24px;
        margin-top: var(--project-spacing);
        align-items: start;
    }

    .project-cover {
        grid-column: 3 / 7;
    }

    .project-info {
        grid-column: 7 / 10;
        padding-top: 8px;
    }

    .project-next {
        grid-column: 12;
        justify-self: end;
    }

    .project-prev {
        grid-column: 1;
        justify-self: start;
    }

    .project-full-image {
        grid-column: 1 / 13;
        margin-top: var(--project-spacing);
    }

    .project-full-image img {
        width: 100%;
        display: block;
    }

    .project-navigation {
        display: flex;
        justify-content: space-between;
        align-items: center;

        margin-top:
            calc(
                var(--header-height)
                + var(--project-spacing)
            );

        grid-column: 1 / -1;
    }

    .project-arrow {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 40px;
        height: 40px;

        text-decoration: none;
    }

    .project-arrow picture,
    .project-arrow img {
        display: block;
        width: 72px;
        height: auto;
    }

    .project-arrow img {
        width: 100%;
        transition: transform 0.3s ease;
    }

    .project-arrow:hover img {
        transform: translateX(8px);
    }

    .project-arrow-left img {
        transform: scaleX(-1);
    }

    .project-arrow-left:hover img {
        transform: scaleX(-1) translateX(8px);
    }

    .project-tags {
        display: flex;
        gap: 10px;
        margin-top: var(--project-spacing);
        margin-top: 16px;
    }

    .project-tag-link {
        padding: 6px 10px;
        border-radius: 4px;

        font-family: var(--font-mono);
        font-size: var(--text-xs);
        font-weight: 400;
        line-height: 1;
        text-transform: uppercase;
        text-decoration: none;

        border: 1px solid rgba(23, 23, 23, 0.15);
        color: var(--muted);

        transition:
            border-color 160ms ease,
            color 160ms ease;
    }

    .project-tag-link:hover {
        border-color: rgba(23, 23, 23, 0.45);
        color: var(--text);
    }

    .project-tag-link.active,
    .project-tag-link:active {
        background: transparent;
        border-color: var(--text);
        color: var(--text);
    }

    .project-description-section {
        display: grid;
        grid-template-columns: repeat(12, minmax(0,1fr));
        column-gap: var(--grid-gap);
        margin-top: var(--project-spacing);
    }

    .project-description-wrapper {
        grid-column: 7 / 11;
    }

    .project-video-section {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: var(--grid-gap);

        margin-top: var(--project-spacing);
    }

    .project-video {
        grid-column: 1 / 13;
    }

    .kinescope-wrapper {
        position: relative;
        width: 100%;
        padding-top: 56.25%; /* 16:9 */
    }

    .footer-block h3.footer-subheading {
        margin-top: 24px;
    }

    .kinescope-wrapper iframe {
        position: absolute;
        inset: 0;

        width: 100%;
        height: 100%;

        border: 0;
    }

    .project-collage-section {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: var(--grid-gap);

        margin-top: var(--project-spacing);
    }

    .project-collage-left {
        grid-column: 1 / 7;
    }

    .project-collage-right {
        grid-column: 7 / 13;
    }

    .project-collage-left img,
    .project-collage-right img {
        width: 100%;
        height: auto;
        display: block;
    }

    .surname-hover {
        text-decoration: none !important;
        cursor: default;
    }

    .project-title,
    .project-potanin-caption,
    .project-passengers-caption,
    .project-sculpture-caption,
    .project-book p,
    .project-calendar-page p,
    .project-book-full p,
    .project-portraits-caption,
    .project-yakut-caption,
    .project-podvorie-caption {
      margin-top: var(--home-caption-spacing);
      margin-bottom: 0;
    }

    .work-description {
      display: none;
    }

    @media (max-width: 760px) {

      :root {
        --page-margin: 16px;
        --grid-gap: 12px;
        --project-spacing: 16px;
        --header-height: 88px;

        --page-margin: 16px;
        --grid-gap: 12px;
        --project-spacing: 16px;
        --header-height: 88px;

        --mobile-block-spacing: 40px;
      }

      html,
      body {
        width: 100%;
        overflow-x: hidden;
      }

      .container {
        width: calc(100% - (var(--page-margin) * 2));
        margin-inline: auto;
      }

      /* Убираем вспомогательную красную grid-сетку */
      .container::before {
        display: none;
      }

      /* ========================================================
        HERO
        ======================================================== */

      .hero-block {
        padding-top:
          calc(
            var(--header-height)
            + var(--project-spacing)
          );

        padding-bottom: 0;
      }

      .hero-container {
        display: grid;

        grid-template-columns:
          repeat(4, minmax(0, 1fr));

        column-gap: var(--grid-gap);
        row-gap: 16px;

        align-items: start;
      }

      /* Портрет */

      .hero-photo {
        grid-column: 1 / 3;

        width: 100%;
        height: auto;

        align-self: start;
      }


      /* Текст */

      .hero-copy {
        grid-column: 1 / 5;

        width: 100%;

        align-self: start;
      }

      .hero-copy p {
        margin: 0;
        width: 100%;
        font-size: clamp(20px, 6vw, 26px);
        line-height: 1.08;
      }


      /* ========================================================
        PROJECTS
        ======================================================== */

      .projects-container {
        position: relative;

        display: grid;

        grid-template-columns:
          repeat(4, minmax(0, 1fr));

        column-gap: var(--grid-gap);
        row-gap: 0;

        min-height: 0;

        margin-top: 20px;
      }


      /* Все изображения */

      .projects-container img {
        display: block;

        width: 100%;
        max-width: 100%;
        height: auto;
      }


      /* ========================================================
        01 — CALENDAR FULL WIDTH
        ======================================================== */

      .calendar-project {
        grid-column: 1 / 5;

        width: 100%;
        margin-top: var(--mobile-block-spacing);
      }

      .calendar-project img {
        width: 100%;
      }

      .calendar-project .project-title {
        margin-top: 8px;
      }


      /* ========================================================
        02 — POTANIN
        маленькая + большая картинка
        ======================================================== */

      .project-potanin-small {
        grid-column: 1 / 3;

        width: 100%;

        margin-top: var(--mobile-block-spacing);
      }

      .project-potanin-large {
        grid-column: 2 / 5;

        width: 100%;

        margin-top: var(--mobile-block-spacing);
      }

      .project-potanin-large .project-title {
        margin-top: 8px;
      }


      /* ========================================================
        03 — PASSENGERS
        ======================================================== */

      .project-passengers {
        grid-column: 1 / 4;

        width: 100%;

        margin-top: var(--mobile-block-spacing);
      }

      .project-passengers .project-title {
        margin-top: 8px;
      }


      /* ========================================================
        04 — SCULPTURE
        ======================================================== */

      .project-sculpture {
        grid-column: 2 / 5;

        width: 100%;

        margin-top: var(--mobile-block-spacing);
      }

      .project-sculpture .project-title {
        margin-top: 8px;
      }


      /* ========================================================
        05 — BOOK
        ======================================================== */

      .project-book {
        grid-column: 1 / 4;

        width: 100%;

        margin-top: var(--mobile-block-spacing);
      }

      .project-book p {
        margin-top: 8px;
      }


      /* ========================================================
        06 — CALENDAR PAGE
        ======================================================== */

      .project-calendar-page {
        grid-column: 2 / 5;

        width: 100%;

        margin-top: var(--mobile-block-spacing);
      }

      .project-calendar-page p {
        margin-top: 8px;
      }


      /* ========================================================
        07 — BOOK FULL WIDTH
        ======================================================== */

      .project-book-full {
        grid-column: 1 / 5;

        width: 100%;

        margin-top: var(--mobile-block-spacing);
      }

      .project-book-full p {
        margin-top: 8px;
      }


      /* ========================================================
        08 — PORTRAITS
        оставляем две картинки рядом
        ======================================================== */

      .project-portraits-left {
        grid-column: 1 / 3;

        width: 100%;

        margin-top: var(--mobile-block-spacing);
      }

      .project-portraits-right {
        grid-column: 3 / 5;

        width: 100%;

        margin-top: var(--mobile-block-spacing);
      }

      .project-portraits-caption {
        grid-column: 1 / 5;

        margin-top: 8px;
      }


      /* ========================================================
        09 — YAKUT
        ======================================================== */

      .project-yakut {
        grid-column: 1 / 4;

        width: 100%;

        margin-top: var(--mobile-block-spacing);
      }

      .project-yakut-caption {
        grid-column: 1 / 4;

        margin-top: 8px;
      }


      /* ========================================================
        10 — PODVORIE
        ======================================================== */

      .project-podvorie {
        grid-column: 2 / 5;

        width: 100%;

        margin-top: var(--mobile-block-spacing);
      }

      .project-podvorie-caption {
        grid-column: 2 / 5;

        margin-top: 8px;
      }


      /* ========================================================
        PROJECT CAPTIONS
        ======================================================== */

      .project-title,
      .project-potanin-caption,
      .project-passengers-caption,
      .project-sculpture-caption,
      .project-portraits-caption,
      .project-yakut-caption,
      .project-podvorie-caption {

        font-family: var(--font-mono);

        font-size: 10px;
        font-weight: 400;

        line-height: 1.25;

        color: var(--muted);
      }




      /* ========================================================
        FOOTER
        ======================================================== */

      .site-footer {
        margin-top: 20px;

        padding:
          40px 0
          48px;
      }

      .footer-grid {
        display: grid;

        grid-template-columns:
          repeat(2, minmax(0, 1fr));

        column-gap: 16px;
        row-gap: 40px;
      }

      .footer-block,
      .footer-block--bio {
        grid-column: span 1;
        width: 100%;
      }


      /* Bio шире остальных */

      .footer-block--bio {
        grid-column: 1 / -1;
      }


      /* Footer headings */

      .footer-block h3 {
        font-size: 10px;

        margin-bottom: 8px;
      }


      /* Footer body */

      .footer-entry p {
        font-size: 12px;
        line-height: 1.35;
      }

      .footer-entry + .footer-entry {
        margin-top: 12px;
      }

      .footer-block h3.footer-subheading {
          margin-top: 38px;
          margin-bottom: 8px;
      }

    }

    @media (min-width: 761px) and (max-width: 1024px) {
      .hero-copy p {
        font-size: 24px;
      }
    }

    @media (min-width: 376px) and (max-width: 599px) {
      .hero-photo {
        width: calc(100% - ((100vw - 375px) * 0.45));
        max-width: none;
      }
    }

    @media (min-width: 600px) and (max-width: 760px) {
    .hero-container {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      column-gap: var(--grid-gap);
      align-items: start;
    }

    .hero-photo {
      grid-column: 1 / 5;
      width: 100%;
      max-width: none;
    }

    .hero-copy {
      grid-column: 5 / 13;
      width: 100%;
      align-self: end;
    }
  }

    /* ==========================================================
    MOBILE BURGER MENU
    ========================================================== */

  /* На десктопе ничего мобильного не показываем */
  .burger-layer,
  .mobile-menu {
    display: none;
  }


  @media (max-width: 760px) {

    /* ========================================================
      DIFFERENCE HEADER
      SONYA PEROVA + ENG/RU + BURGER
      ======================================================== */

    .site-header {
      z-index: 1002;

      mix-blend-mode: difference;
      isolation: isolate;
    }

    .nav {
      position: relative;

      display: grid;

      grid-template-columns: 1fr auto;
      grid-template-areas: "brand lang";

      align-items: center;

      padding: 22px 0;
    }


    /* NAME */

    .brand {
      grid-area: brand;
      justify-self: start;

      color: #ffffff;
      opacity: 1;

      text-decoration: none;
    }

    .brand::after {
      display: none;
    }


    /* HIDE DESKTOP LINKS */

    .nav-links {
      display: none;
    }


    /* LANGUAGE */

    .lang-switcher {
      grid-area: lang;

      display: flex;
      align-items: center;

      gap: 10px;

      margin-right: 44px;

      position: relative;
    }

    .lang-switcher .lang-btn {
      color: #ffffff;
      opacity: 1;
    }

    .lang-slash {
      display: inline-block;
      color: #ffffff;
    }


    /* ========================================================
      DIFFERENCE BURGER
      ======================================================== */

    .burger-layer {
      display: block;

      position: fixed;

      top: 0;
      left: var(--page-margin);
      right: var(--page-margin);

      height: 72px;

      z-index: 1005;

      pointer-events: none;

      mix-blend-mode: difference;
    }

    .menu-toggle {
      display: block;

      position: absolute;

      top: 50%;
      right: 0;

      transform: translateY(-50%);

      width: 28px;
      height: 28px;

      padding: 0;
      margin: 0;

      border: 0;
      background: transparent;

      cursor: pointer;
      pointer-events: auto;
    }


    .menu-toggle span {
      position: absolute;
      left: 0;

      width: 100%;
      height: 2px;

      background: #ffffff;
    }

    .menu-toggle span:first-child {
      top: 8px;
    }

    .menu-toggle span:last-child {
      top: 19px;
    }

    /* Бургер превращается в difference-крест */

  .menu-toggle span {
    transition:
      transform 0.3s ease,
      top 0.3s ease;
  }

  .menu-toggle.is-animating span:first-child {
    top: 14px;
    transform: rotate(45deg);
  }

  .menu-toggle.is-animating span:last-child {
    top: 14px;
    transform: rotate(-45deg);
  }


    /* ========================================================
      NORMAL MOBILE MENU
      Это уже ОТДЕЛЬНЫЙ элемент вне .site-header
      ======================================================== */

    .mobile-menu {
      display: flex;
      position: fixed;
      inset: 0;

      width: 100vw;
      height: 100dvh;

      background: var(--bg);
      z-index: 1003;

      padding: var(--page-margin);
      box-sizing: border-box;

      pointer-events: none;

      opacity: 0;
      visibility: hidden;

      transition:
        opacity 0s linear 0.2s,
        visibility 0s linear 0.2s;
    }

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

      transition-delay: 0.2s;
    }

    /* ========================================================
      MENU LINKS
      ======================================================== */

    .mobile-menu-links {
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      gap: clamp(18px, 4vw, 32px);

      margin-top: clamp(80px, 15vh, 140px);
      padding: 0;
      overflow: hidden;
      width: 100%;
    }

    .mobile-menu.is-closing .mobile-menu-links a {
      opacity: 0;
      transform: scale(0.9);

      transition:
        transform 0.2s cubic-bezier(1, 0, 1, 1),
        opacity 0.2s cubic-bezier(1, 0, 1, 1);
    }

    .mobile-menu-links a.active {
      color: #171717;
    }

      .mobile-menu-links a {
      display: block;

      font-family: var(--font-sans);
      font-size: clamp(40px, 10.5vw, 55px);
      font-weight: 400;
      line-height: 1.05;
      letter-spacing: -0.03em;

      color: #bdbdbd;
      text-decoration: none;

      opacity: 0;
      transform: scale(0.9);
      transform-origin: top left;

      transition:
        transform 0.2s cubic-bezier(1, 0, 1, 1) 0.2s,
        opacity 0s linear 0.4s;
    }

    .mobile-menu.active .mobile-menu-links a {
      transform: translateY(0);
      opacity: 1;
    }

    .mobile-menu.is-open .mobile-menu-links a {
      opacity: 1;
      transform: scale(1);
    }

    .mobile-menu.is-open .mobile-menu-links a:nth-child(1) {
      transition:
        transform 0.2s cubic-bezier(0, 0, 0, 1) 0.22s,
        opacity 0s linear 0.22s;
    }

    .mobile-menu.is-open .mobile-menu-links a:nth-child(2) {
      transition:
        transform 0.2s cubic-bezier(0, 0, 0, 1) 0.27s,
        opacity 0s linear 0.27s;
    }

    .mobile-menu.is-open .mobile-menu-links a:nth-child(3) {
      transition:
        transform 0.2s cubic-bezier(0, 0, 0, 1) 0.32s,
        opacity 0s linear 0.32s;
    }

    .mobile-menu.is-open .mobile-menu-links a:nth-child(4) {
      transition:
        transform 0.2s cubic-bezier(0, 0, 0, 1) 0.37s,
        opacity 0s linear 0.37s;
    }
    }

    .mobile-menu-links a::after {
      display: none;
    }


    /* ========================================================
      OPEN STATE
      ======================================================== */

    body.menu-open {
      overflow: hidden;
    }

  /* =========================================
    WORK PAGE — MOBILE
    ========================================= */

  @media (max-width: 760px) {

    body[data-page="work"] .page-content {
      padding-top: 0;
    }

    body[data-page="work"] .work-filters {
      display: flex;
      align-items: center;

      width: fit-content;

      margin-left: auto;
      margin-right: auto;

      margin-top: 0;
      margin-bottom: 0;
      padding: 0;
      gap: 12px;
    }

    body[data-page="work"] .work-card .work-tags {
      display: none;
    }

    body[data-page="work"] .work-filter {
      flex: 0 1 auto;
      min-width: 0;

      padding: 5px 7px;

      font-size: clamp(8px, 2.55vw, 11px);
      line-height: 1.1;
    }

    body[data-page="work"][data-lang="ru"] .work-filter {
      padding-left: 5px;
      padding-right: 5px;

      font-size: clamp(7px, 2.25vw, 10px);
    }

    body[data-page="work"] .work-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        width: 100%;
    }
    

    body[data-page="work"] .work-card {
      width: 100%;
      display: block;
    }

    body[data-page="work"] .work-image {
      width: 100%;
      aspect-ratio: 16 / 9;
      overflow: hidden;
    }

    body[data-page="work"] .work-image img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    body[data-page="work"] .work-meta {
      margin-top: 12px;
    }

    body[data-page="work"] .work-title {
      max-width: none;
      font-size: 16px;
    }

    

  }

  /* ==========================================================
    PROJECT PAGE — MOBILE ONLY
    Desktop styles above remain untouched
    ========================================================== */

  @media (max-width: 760px) {

    /* ---------- PROJECT NAVIGATION ---------- */

    body[data-page="project"] .project-navigation {
      margin-top: calc(48px + var(--project-spacing));

      width: 100%;
      padding-left: var(--page-margin);
      padding-right: var(--page-margin);
      box-sizing: border-box;

      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    body[data-page="project"] .project-arrow {
      width: 28px;
      height: 28px;

      display: flex;
      align-items: center;
      justify-content: center;
    }

    body[data-page="project"] .project-arrow img {
      width: 28px;
      height: auto;
      max-width: 100%;
    }

    /* ALL PROJECT MEDIA AFTER COVER — FULL BLEED */

    body[data-page="project"] .project-full-image,
    body[data-page="project"] .project-video-section,
    body[data-page="project"] .project-collage-section {
      grid-column: 1 / -1 !important;

      width: 100vw !important;
      max-width: 100vw !important;

      position: relative;
      left: calc(50% - 50vw);

      margin-left: 0 !important;
      margin-right: 0 !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    body[data-page="project"] .project-full-image img,
    body[data-page="project"] .project-video-section video {
      display: block;
      width: 100% !important;
      max-width: none !important;
      height: auto;
    }

    body[data-page="project"] .project-hero {
      display: grid;

      grid-template-columns:
        repeat(4, minmax(0, 1fr));

      column-gap: var(--grid-gap);
      row-gap: 16px;

      margin-top: var(--project-spacing);

      align-items: start;
    }

    body[data-page="project"] .project-cover {
      grid-column: 1 / 5;

      width: 100%;
    }

    body[data-page="project"] .project-cover img {
      display: block;

      width: 100%;
      height: auto;
    }

    body[data-page="project"] .project-info {
      grid-column: 1 / 4;

      width: 100%;

      padding-top: 0;
    }


    /* ---------- TITLE ---------- */

    body[data-page="project"] .project-page-title {
      width: 100%;
      max-width: none;

      margin: 0;

      font-size: clamp(18px, 5vw, 24px);
      line-height: 1.08;
      letter-spacing: -0.02em;
    }


    /* ---------- TAG ---------- */

    body[data-page="project"] .project-tags {
      margin-top: 12px;

      display: flex;
      gap: 8px;
    }

    body[data-page="project"] .project-tag,
    body[data-page="project"] .project-tag-link {
      display: inline-flex;

      padding: 5px 8px;

      border: 1px solid rgba(23, 23, 23, 0.15);
      border-radius: 4px;

      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 400;
      line-height: 1;

      text-transform: uppercase;
      text-decoration: none;

      color: var(--muted);
    }


    /* ---------- DESCRIPTION ---------- */

    body[data-page="project"] .project-description-section {
      display: grid;

      grid-template-columns:
        repeat(4, minmax(0, 1fr));

      column-gap: var(--grid-gap);

      margin-top: var(--project-spacing);
      margin-bottom: 0;
    }

    body[data-page="project"] .project-description-wrapper {
      grid-column: 1 / 5;

      width: 100%;
    }

    body[data-page="project"] .project-description {
      margin: 0;

      width: 100%;
      max-width: none;

      font-size: 14px;
      line-height: 1.4;
    }


    /* ---------- FULL WIDTH IMAGES ---------- */

    body[data-page="project"] .project-full-image {
      width: 100%;

      margin-top: var(--project-spacing);
    }

    body[data-page="project"] .project-full-image img {
      display: block;

      width: 100%;
      height: auto;
    }


    /* ---------- VIDEO ---------- */

    body[data-page="project"] .project-video-section {
      display: block;

      margin-top: var(--project-spacing);
    }

    body[data-page="project"] .project-video {
      width: 100%;
    }

    body[data-page="project"] .kinescope-wrapper {
      width: 100%;

      padding-top: 56.25%;
    }


    /* ---------- COLLAGES ---------- */

    body[data-page="project"] .project-collage-section {
      display: grid;

      grid-template-columns:
        repeat(2, minmax(0, 1fr));

      column-gap: var(--grid-gap);

      margin-top: var(--project-spacing);
    }

    body[data-page="project"] .project-collage-left,
    body[data-page="project"] .project-collage-right {
      grid-column: auto;

      width: 100%;
    }

    body[data-page="project"] .project-collage-left img,
    body[data-page="project"] .project-collage-right img {
      display: block;

      width: 100%;
      height: auto;
    }


    /* ---------- LAST BLOCK / FOOTER ---------- */

    body[data-page="project"] .project-page {
      padding-bottom: 64px;
    }

  }
  @media (max-width: 760px) {

    body[data-page="showreel"] .showreel-section {
      display: block;

      min-height: 0;

      margin-top: calc(
        var(--header-height) + var(--project-spacing)
      );

      margin-bottom: var(--project-spacing);
    }

    body[data-page="showreel"] .showreel-wrapper {
      width: clamp(
        85%,
        calc(100% - (760px - 100vw) * 0.08),
        100%
      );

      margin-inline: auto;
    }
  }

  @media (max-width: 760px) {

    .page-content,
    body[data-page="project"] .project-page {
        transform: scale(1);
        transform-origin: top center;
        opacity: 1;

        transition:
            transform 0.2s cubic-bezier(1, 0, 1, 1),
            opacity 0s linear 0.2s;
    }

    html.menu-is-open .page-content,
    html.menu-is-open body[data-page="project"] .project-page {
        transform: scale(0.9);
        opacity: 0;
    }

    

    html.menu-is-closing .page-content,
    html.menu-is-closing body[data-page="project"] .project-page {
      transition:
        transform 0.2s cubic-bezier(0, 0, 0, 1) 0.23s,
        opacity 0s linear !important;
    }
    }

  @media (max-width: 760px) {

    /* MENU ITEMS — closing */
    .mobile-menu.is-open.is-closing .mobile-menu-links a {
      transform: scale(0.9) !important;
      opacity: 1 !important;

      transition:
        transform 0.2s cubic-bezier(1, 0, 1, 1) 0s !important;
    }
    
  }

  @media (max-width: 760px) {

    .work-filter-wrapper {
      --filter-bleed: 6px;
      --filter-space: 0px;

      width: calc(100% + (var(--filter-bleed) * 2));
      margin-left: calc(var(--filter-bleed) * -1);
      margin-right: calc(var(--filter-bleed) * -1);

      padding-top: var(--filter-space);
      padding-bottom: var(--filter-space);

      box-sizing: border-box;
    }

    .work-filter {
      width: 100%;
      display: grid;

      /* пропорции четырёх рамок */
      grid-template-columns: 6fr 14fr 12fr 5fr;

      gap: 8px;

      margin: 0;
      padding: 0;
    }

    .work-filter-item {
      width: 100%;
      min-width: 0;
      box-sizing: border-box;

      display: flex;
      align-items: center;
      justify-content: center;

      font-size: clamp(10px, 2.5vw, 20px);
      line-height: 1;

      padding: 0.42em 0.2em;
      white-space: nowrap;
    }
  }

  @media (max-width: 760px) {

    body[data-page="work"] .work-filter-section {
      margin-top: 70px !important;
    }

    body[data-page="work"] .work-grid-section {
      margin-top: 25px !important;
    }

    .work-meta {
      position: relative;
      display: block;

      margin-top: 16px;
    }

    .work-title {
      margin: 0;

      font-family: var(--font-ui);
      font-size: clamp(24px, 5vw, 34px);
      line-height: 1.08;
      font-weight: 500;

      color: var(--text);
    }

    .work-tags {
      display: none;
    }

    .work-description {
      display: block;

      margin: 10px 0 0;

      font-family: var(--font-ui);
      font-size: clamp(8px, 3vw, 12px);
      line-height: var(--leading-body);
      font-weight: 400;

      color: #9f9f9f;
    }

  }

  @media (max-width: 760px) {

    .contact-page {
      min-height: 100vh;

      padding-top: calc(
        var(--header-height)
        + 48px
      );
    }

    .contact-grid {
      display: block;
    }

    .contact-title {
      margin: 0;

      font-size: clamp(22px, 7.4vw, 62px);
      line-height: 1.2;
      letter-spacing: -0.035em;
    }

    .contact-direct {
      margin-top: 100px;
    }

    .contact-socials {
      margin-top: 35px;
    }

    .contact-label {
      margin-bottom: 12px;

      font-size: clamp(8px, 2.8vw, 13px);
      line-height: 1.2;
    }

    .contact-block a {
      margin-bottom: 16px;

      font-size: clamp(12px, 3.8vw, 18px);
      line-height: 1.2;
    }
  }

  @media (max-width: 760px) {

      body[data-page="contact"] .contact-block a {
          margin-bottom: 0;
      }

      body[data-page="contact"] .contact-block a + a {
          margin-top: 8px;
      }

  }

  @media (min-width: 600px) and (max-width: 760px) {

      .contact-grid {
          display: grid;
          grid-template-columns: repeat(12, minmax(0, 1fr));
          column-gap: var(--grid-gap);
      }

      .contact-title {
          grid-column: 1 / -1;
      }

      .contact-direct {
          grid-column: 1 / 6;
          margin-top: 80px;
      }

      .contact-socials {
          grid-column: 7 / 11;
          margin-top: 80px; /* подбирается */
      }
  }
  

  .reveal {
      opacity: 0;
      transform: translateY(20px);

      transition:
          opacity .9s cubic-bezier(.22,1,.36,1),
          transform .9s cubic-bezier(.22,1,.36,1);
  }

  .reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
  }

  .reveal-words .rw-word {
      display: inline-block;
      white-space: nowrap;
  }

  .reveal-words .rw-word-inner {
      display: inline-block;

      opacity: 0;
      transform: translateY(.35em);

      transition:
          opacity .7s ease,
          transform .7s cubic-bezier(.22,1,.36,1);

      will-change: transform, opacity;
  }

  .reveal-words.is-visible .rw-word-inner {
      opacity: 1;
      transform: translateY(0);
  }

  body[data-page="allergy"] {
      background: #ffffff;
  }

  body[data-page="allergy"] .page-wrapper {
      background: #ffffff;
  }

html:has(body[data-page="allergy"]) {
    background: #ffffff;
}

html:has(body[data-page="allergy"]) .page-wrapper {
    background: #ffffff;
}

html:has(body[data-page="allergy"]) .mobile-menu {
    background: #ffffff;
}

/* ==========================================================
   ALLERGY PAGE
   ========================================================== */

html:has(body[data-page="allergy"]) {
    background: #fff;
}

html:has(body[data-page="allergy"]) .page-wrapper,
html:has(body[data-page="allergy"]) .mobile-menu,
html:has(body[data-page="allergy"]) .site-footer {
    background: #fff;
}

html:has(body[data-page="potanin"]) {
    background: #ffffff;
}

html:has(body[data-page="potanin"]) .page-wrapper {
    background: #ffffff;
}

html:has(body[data-page="potanin"]) .mobile-menu {
    background: #ffffff;
}

/* ==========================================================
   POTANIN PAGE
   ========================================================== */

html:has(body[data-page="potanin"]) {
    background: #fff;
}

html:has(body[data-page="potanin"]) .page-wrapper,
html:has(body[data-page="potanin"]) .mobile-menu,
html:has(body[data-page="potanin"]) .site-footer {
    background: #fff;
}


.illustration-item{
    grid-column: span 4;
    display: none;
}

.illustration-item img{
    width:100%;
    display:block;
}

/* СРЕДНЯЯ КАРТИНКА */

.illustration-hover{
    position: relative;
    overflow: hidden;
}

.illustration-default{
    display:block;
    transition: opacity .25s ease;
}

.illustration-hover-image{
    position:absolute;
    inset:0;
    display:block;
    opacity:0;
    transition:opacity .25s ease;
}

.illustration-hover:hover .illustration-default{
    opacity:0;
}

.illustration-hover:hover .illustration-hover-image{
    opacity:1;
}

@media (max-width:760px){

    .work-grid.show-illustrations{
        display:grid;
        grid-template-columns:1fr 1fr;
        grid-template-areas:
            "left right"
            "bottom bottom";
        gap:12px;
    }

    .work-grid.show-illustrations .illustration-item{
        display:block;
        grid-column:auto;
    }

    .work-grid.show-illustrations .illustration-item:nth-child(1){
        grid-area:left;
    }

    .work-grid.show-illustrations .illustration-item:nth-child(2){
        grid-area:right;
    }

    .work-grid.show-illustrations .illustration-item:nth-child(3){
        grid-area:bottom;
    }

    .work-grid.show-illustrations .illustration-item img{
        width:100%;
        aspect-ratio:1/1;
        object-fit:cover;
    }

}

@media (max-width: 760px) {

  body[data-page="work"] .work-filter-item {
    background: transparent;
    border: 1px solid rgba(23,23,23,.18);
    color: #6B655E;
  }

  body[data-page="work"] .work-filter-item.active {
    border-color: #171717;
    color: #171717;
  }

}

/* ==========================================
   LIGHT PROJECTS (Potanin + Allergy)
========================================== */

body[data-theme="light"]{
    background:#fff;
}

body[data-theme="light"] .page-wrapper{
    background:#fff;
}

body[data-theme="light"] .site-header,
body[data-theme="light"] .burger-layer {
    mix-blend-mode: difference;
}

body[data-theme="light"] {
    background: #fff;
}

body[data-theme="light"] .page-wrapper {
    background: #fff;
}

body[data-theme="light"] .brand,
body[data-theme="light"] .nav-item,
body[data-theme="light"] .lang-btn,
body[data-theme="light"] .lang-slash {
    color: #fff;
}

body[data-theme="light"] .menu-toggle span {
    background: #fff;
}

body[data-theme="light"] .project-page {
    background: #fff;
    padding-top: 0;
    margin-top: 0;
}

/* Скрываем карточку Kamikadze */
.illustration-hover {
    display: none;
}

@media (max-width: 760px) {

    /* Полностью скрыть карточку Kamikadze */
    .illustration-item.illustration-hover {
        display: none !important;
    }

    /* Оставшиеся две картинки по половине ширины */
    .illustration-item:not(.illustration-hover) {
        grid-column: span 2;
    }

}

.illustration-grid {
    grid-column: 1 / -1;
    display: none;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    margin-top: 0;
}

.illustration-item {
    grid-column: span 4;
    display: block;
}

@media (max-width: 760px) {

    .illustration-item.illustration-hover {
        display: none;
    }

    .illustration-item {
        grid-column: span 2;
    }

    .illustration-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* ==========================================
   ILLUSTRATION GRID — DESKTOP
========================================== */


  body[data-page="work"] .work-card,
  body[data-page="work"] .illustration-grid {
      grid-column: span 2;
      width: 100%;
  }

  body[data-page="work"] .illustration-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
  }

  body[data-page="work"] .illustration-item {
      grid-column: auto;
  }

  body[data-page="work"] .illustration-item img {
      width: 100%;
      display: block;
  }
}


@media (min-width: 761px) and (max-width: 1024px) {
    .contact-title {
        font-size: clamp(42px, 5.5vw, 62px);
        grid-column: 2 / 9;
    }

}

@media (min-width: 761px) and (max-width: 1024px) {

    .project-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 12px;
    }

    .project-tag-link {
        padding: 4px 8px;
        font-size: 9px;
        line-height: 1;
        white-space: nowrap;
    }

}

@media (max-width: 760px) {
  .contact-title {
        margin: 0;

        font-size: clamp(30px, 9vw, 52px);
        line-height: 1.2;
        letter-spacing: -0.035em;
      }
  }

/* ==========================================================
   ILLUSTRATIONS — DESKTOP
   ========================================================== */

@media (min-width: 761px) {

    .illustration-grid {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: var(--grid-gap);
        margin-top: 0;
    }

    .illustration-item {
        grid-column: span 4;
        position: relative;
    }

    .illustration-item img {
        display: block;
        width: 100%;
        height: auto;
    }

    .illustration-hover {
        position: relative;
        overflow: hidden;
        display: block;
    }

    .illustration-default {
        display: block;
        width: 100%;
        transition: opacity .25s ease;
    }

    .illustration-hover-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity .25s ease;
    }

    .illustration-hover:hover .illustration-default {
        opacity: 0;
    }

    .illustration-hover:hover .illustration-hover-image {
        opacity: 1;
    }

}

/* ==========================================================
   ILLUSTRATION GRID
   ========================================================== */

/* По умолчанию скрыт */
.illustration-grid {
    display: none;
}

/* Показываем только при выборе Illustration */
.work-grid.show-illustrations .illustration-grid {
    display: grid;
}


/* ==========================================================
   DESKTOP
   ========================================================== */

@media (min-width: 761px) {

    .work-grid.show-illustrations {
        row-gap: 40px;
    }
  
    .work-grid.show-illustrations .illustration-grid {
        grid-column: 1 / -1;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: var(--grid-gap);

        /* ВАЖНО: отступ сверху НЕ задаём.
           Расстояние даёт row-gap самого .work-grid */
        margin-top: 0;
    }

    .work-grid.show-illustrations .illustration-item {
        position: relative;
        display: block;
    }

    /* Первая картинка */
    .work-grid.show-illustrations
    .illustration-item:nth-child(1) {
        grid-column: 1 / 5;
    }

    /* Вторая картинка */
    .work-grid.show-illustrations
    .illustration-item:nth-child(2) {
        grid-column: 5 / 9;
    }

    /* Третья картинка */
    .work-grid.show-illustrations
    .illustration-item:nth-child(3) {
        grid-column: 9 / 13;
    }

    .work-grid.show-illustrations .illustration-item img {
        display: block;
        width: 100%;
        height: auto;
    }

    /* Hover */
    .work-grid.show-illustrations .illustration-hover {
        position: relative;
        overflow: hidden;
    }

    .work-grid.show-illustrations .illustration-default {
        display: block;
        width: 100%;
        transition: opacity .25s ease;
    }

    .work-grid.show-illustrations .illustration-hover-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity .25s ease;
    }

    .work-grid.show-illustrations
    .illustration-hover:hover
    .illustration-default {
        opacity: 0;
    }

    .work-grid.show-illustrations
    .illustration-hover:hover
    .illustration-hover-image {
        opacity: 1;
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 760px) {

    .work-grid.show-illustrations .illustration-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;

        /* Обычный gap между картинками */
        gap: 12px;

        margin-top: 0;
    }

    .work-grid.show-illustrations .illustration-item {
        display: block;
        grid-column: auto;
    }

    .work-grid.show-illustrations
    .illustration-item:nth-child(1) {
        grid-column: 1;
    }

    .work-grid.show-illustrations
    .illustration-item:nth-child(2) {
        grid-column: 2;
    }

    .work-grid.show-illustrations
    .illustration-item:nth-child(3) {
        grid-column: 1 / -1;
    }

    .work-grid.show-illustrations .illustration-item img {
        display: block;
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }
}

/* ==========================================================
   ANRI SLIDESHOW
   ========================================================== */

.anri-slideshow {
    display: none;
    grid-column: 1 / -1;
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden;
    margin: 0;
}

.work-grid.show-anri .anri-slideshow {
    display: block;
}

.anri-slide {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
}

.anri-slide:first-child {
    position: relative;
}

.anri-slide:not(:first-child) {
    position: absolute;
    top: 0;
    left: 0;
}

.anri-slide.is-active {
    opacity: 1;
}

.anri-caption {
    display: none;
    grid-column: 1 / -1;
    margin-top: var(--home-caption-spacing);

    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: var(--leading-ui);
    color: var(--muted);
}

.work-grid.show-illustrations .anri-caption {
    display: block;
    margin-top: calc(-1 * var(--grid-gap) + var(--home-caption-spacing));
}

.work-grid.show-anri .anri-caption {
    display: block;
}

@media (min-width: 761px) {
    .work-image {
        overflow: hidden;
    }

    .work-image img {
        transition: transform 500ms cubic-bezier(.22, 1, .36, 1);
        transform: scale(1);
    }

    .work-card:hover .work-image img {
        transform: scale(1.06);
    }
}

/* ==========================================================
   GRAPHIC DESIGN FEATURE
   ========================================================== */

.graphic-feature {
    display: none;
    grid-column: 1 / -1;
    width: calc(100% + 2 * var(--page-margin));
    margin-left: calc(-1 * var(--page-margin));
    background: #fff;

    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);

    padding: 60px 0;
}

.graphic-feature-image {
    grid-column: 3 / 11;
    width: 100%;
}

.graphic-feature-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* CHAYKA GRAPHIC DESIGN FEATURE */

.chayka-feature {
    display: none;
    grid-column: 1 / -1;
    width: calc(100% + 2 * var(--page-margin));
    margin-left: calc(-1 * var(--page-margin));
    background: #252525;

    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);

    padding: 72px 0;
}

.chayka-feature-image {
    grid-column: 4 / 10;
    width: 100%;
}

.chayka-feature-image img {
    display: block;
    width: 100%;
    height: auto;
}

.illustration-caption {
    display: none;
    margin-top: 8px;
    margin-bottom: 0;

    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.25;
    color: var(--muted);
    text-align: left;
}

.work-grid.show-illustrations .illustration-caption {
    display: block;
}

.illustration-feature {
    display: none;
    grid-column: 1 / -1;
    width: 100%;
}

.work-grid.show-illustrations .illustration-feature {
    display: block;
}

.illustration-feature .illustration-caption {
    display: block;
}

.work-grid:has(.illustration-grid[style*="display: grid"]) .illustration-caption {
    display: block;
}

/* ==========================================================
   SINGLE ILLUSTRATION PAGE
   ========================================================== */

.one-illustration-page {
    padding-top: calc(
        var(--header-height) + var(--project-spacing)
    );
}

.one-illustration-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: var(--project-spacing);
}

.illustration-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    text-decoration: none;
}

.illustration-arrow picture,
.illustration-arrow img {
    display: block;
    width: 72px;
    height: auto;
}

.illustration-arrow img {
    width: 100%;
    transition: transform 0.3s ease;
}

.illustration-arrow-left:hover img {
    transform: translateX(-8px);
}

.illustration-arrow-right:hover img {
    transform: translateX(8px);
}


.one-illustration-image {
    grid-column: 3 / 11;
    cursor: url("images/fullarrow.svg") 16 16, auto;
    width: 100%;
    height: auto;
    overflow: visible;
}

.one-illustration-image:hover {
    cursor: url("images/fullarrow.png") 16 16, auto;
}

.one-illustration-content {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
}


.one-illustration-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}


.one-illustration-title {
    margin-top: 12px;

    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.25;

    color: var(--muted);
}

@media (max-width: 760px) {

    .one-illustration-page {
        padding-top: calc(
            var(--header-height) + var(--project-spacing)
        );
    }

    .one-illustration-navigation {
        margin-bottom: var(--project-spacing);
    }

    .one-illustration-image {
        grid-column: 2 / 12;
        width: 100%;
        height: auto;
        overflow: visible;
    }

    .illustration-arrow {
        width: 32px;
        height: 32px;
    }

    .illustration-arrow picture,
    .illustration-arrow img {
        width: 48px;
    }

}

.anri-link {
    display: none;
    grid-column: 1 / -1;
    color: inherit;
    text-decoration: none;
}

.work-grid.show-illustrations .anri-link {
    display: block;
}

.illustration-arrow-left img {
    transform: scaleX(-1);
}

.illustration-arrow-left:hover img {
    transform: scaleX(-1) translateX(8px);
}


.illustration-custom-cursor {
    position: fixed;

    width: 26px;
    height: 26px;
    

    pointer-events: none;
    z-index: 9999;

    transform: translate(-50%, -50%);

    opacity: 0;

    transition: opacity 120ms ease;

    object-fit: contain;
    filter: brightness(0) invert(1);
    mix-blend-mode: difference;
}
/* ANRI CAPTION */
body[data-page="work"] .anri-caption {
    display: none !important;
}

body[data-page="work"] .work-grid.show-illustrations .anri-caption {
    display: block !important;

    margin-top: 12px;

    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: var(--leading-ui);

    color: var(--muted);
}

/* ==========================================================
   BODY COORDINATE — DARK PAGE
   ========================================================== */

body.project-bodycoordinate {
    background: #000000;
    color: #ffffff;
}

body.project-bodycoordinate .page-content,
body.project-bodycoordinate .project-page {
    background: #000000;
    color: #ffffff;
}

body.project-bodycoordinate .project-page-title,
body.project-bodycoordinate .project-description,
body.project-bodycoordinate .body-text {
    color: #ffffff;
}

body.project-bodycoordinate .site-footer {
    background: #000000;
    color: #ffffff;
}

body.project-bodycoordinate .site-footer h3,
body.project-bodycoordinate .site-footer p,
body.project-bodycoordinate .site-footer a {
    color: #ffffff;
}

body.project-bodycoordinate .site-header {
    mix-blend-mode: normal;
}

body.project-bodycoordinate .site-header .nav-item,
body.project-bodycoordinate .site-header .brand,
body.project-bodycoordinate .site-header .lang-btn,
body.project-bodycoordinate .site-header .lang-slash {
    color: #ffffff;
}

body.project-bodycoordinate .project-arrow img {
    filter: brightness(0) invert(1);
}

body.project-bodycoordinate .project-tag-link {
    color: #BEBEBE;
    border-color: rgba(255, 255, 255, 0.4);
}

body.project-bodycoordinate .project-tag-link:hover {
    color: #BEBEBE;
    border-color: #BEBEBE;
}

html:has(body.project-bodycoordinate) {
    background: #000000;
}

body.project-bodycoordinate {
    background: #000000;
}

/* Светлый фон проектных страниц */
body[data-theme="light"],
body[data-theme="light"] .project-page {
    background: #ffffff;
}

html:has(body[data-theme="light"]) {
    background: #ffffff;
}



@media (min-width: 761px) {

    /* Картинки после обложки — 2–12 колонки */
    body.project-calendar .project-page > .container:has(> .project-full-image) {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: var(--grid-gap);
    }

    body.project-calendar .project-full-image {
        grid-column: 2 / 12;
    }

    /* Видео — 2–12 колонки */
    body.project-calendar .project-video-section {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    body.project-calendar .project-video {
        grid-column: 2 / 12;
    }

     .project-collage-left {
          grid-column: 2 / 7;
      }

      .project-collage-right {
          grid-column: 7 / 12;
      }


}

@media (min-width: 761px) {

    /* Текст после обложки — общая сетка, текст в колонках 7–11 */
    body.project-bodycoordinate .project-description-section {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: var(--grid-gap);
    }

    body.project-bodycoordinate .project-description-wrapper {
        grid-column: 7 / 11;
    }


    /* Контейнеры с картинками — та же общая 12-колоночная сетка */
    /* project-navigation намеренно исключён */
    body.project-bodycoordinate .project-page > div.container:not(.project-navigation) {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: var(--grid-gap);
    }

    body.project-bodycoordinate
    .project-page > div.container:not(.project-navigation)
    .project-full-image {
        grid-column: 2 / 12;
    }


    /* Стрелки остаются как обычно */
    body.project-bodycoordinate .project-navigation {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    body.project-bodycoordinate .project-video-section {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: var(--grid-gap);
        margin-top: var(--project-spacing);
    }

    body.project-bodycoordinate .project-video {
        grid-column: 2 / 12;
        width: 100%;
    }

    body.project-bodycoordinate .kinescope-wrapper {
        position: relative;
        width: 100%;
        padding-top: 56.25%;
    }

    body.project-bodycoordinate .project-video-section video {
        position: absolute;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }

}

.calendar-project,
.project-potanin-small,
.project-potanin-large,
.project-book,
.project-book-full,
.project-portraits-left,
.project-portraits-right,
.project-portraits-caption,
.project-podvorie,
.project-podvorie-caption {
    text-decoration: none;
    color: inherit;
}

.project-calendar-page {
    text-decoration: none;
    color: inherit;
}

.project-navigation-bottom {
    margin-top: var(--project-spacing);
}

.project-potanin-collage .project-collage-left,
.project-potanin-collage .project-collage-right {
    grid-column: 1 / 13;
}

/* POTANIN — COLLAGES */
.project-potanin-collage .project-collage-left {
    grid-column: 1 / 7;
}

.project-potanin-collage .project-collage-right {
    grid-column: 7 / 13;
}

/* NON-PLACE — COLLAGES */
.project-nonplace .project-collage-left {
    grid-column: 1 / 7;
}

.project-nonplace .project-collage-right {
    grid-column: 7 / 13;
}

.one-illustration-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.one-illustration-title {
    margin-top: 8px;

    font-family: var(--font-ui);
    font-size: var(--text-lg);
    font-weight: 500;
    line-height: var(--leading-heading);
    letter-spacing: -0.01em;

    color: var(--text);
}

.one-illustration-content {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
}

.one-illustration-image,
.one-illustration-title {
    grid-column: 2 / 12;
}

/* ==========================================================
   ANRI LIGHTBOX
   ========================================================== */

.anri-lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;

    display: none;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.8);
}

.anri-lightbox.is-open {
    display: flex;
}

.anri-lightbox-image {
    width: 85vw;
    height: 75vh;

    display: flex;
    align-items: center;
    justify-content: center;
}

.anri-lightbox-image img {
    display: block;

    width: 85vw;
    height: auto;
    max-width: 85vw;

    object-fit: contain;
}

.anri-lightbox-arrow {
    background: transparent;
    border: none;
    cursor: pointer;
    position: fixed;

    top: 50%;
    transform: translateY(-50%);
}

.anri-lightbox-arrow img {
    width: 40px;
    height: auto;
    filter: brightness(0) invert(1);
    transition: transform 0.3s ease;
}

.anri-lightbox-arrow-left {
    left: 24px;
}

.anri-slide {
    cursor: pointer;
}

.anri-lightbox-arrow-right {
    right: 24px;
}

.anri-lightbox-arrow-left img {
    transform: scaleX(-1);
}

.anri-lightbox-arrow-left:hover img {
    transform: scaleX(-1) translateX(8px);
}

.anri-lightbox-arrow-right:hover img {
    transform: translateX(8px);
}

@media (max-width: 760px) {

    .anri-lightbox-image {
        max-width: 80vw;
        max-height: 85vh;
    }

    .anri-lightbox-image img {
        height: 85vh;
        width: auto;
        max-width: none;
    }

    .anri-lightbox-arrow-left {
        left: 8px;
    }

    .anri-lightbox-arrow-right {
        right: 8px;
    }

    .anri-lightbox-arrow img {
        width: 48px;
    }

}

/* ==========================================================
   4BREWERS LIGHTBOX
   ========================================================== */

.fourbrewers-lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;

    display: none;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.8);
}

.fourbrewers-lightbox.is-open {
    display: flex;
}

.fourbrewers-lightbox-image {
    width: 85vw;
    height: 75vh;

    display: flex;
    align-items: center;
    justify-content: center;
}

.fourbrewers-lightbox-image img {
    display: block;

    height: 95vh;
    width: auto;

    max-width: none;
    max-height: none;

    object-fit: contain;
}

.fourbrewers-lightbox-arrow {
    background: transparent;
    border: none;
    cursor: pointer;
    position: fixed;

    top: 50%;
    transform: translateY(-50%);
}

.fourbrewers-lightbox-arrow img {
    width: 40px;
    height: auto;

    filter: brightness(0) invert(1);

    transition: transform 0.3s ease;
}

.fourbrewers-lightbox-arrow-left {
    left: 24px;
}

.fourbrewers-lightbox-arrow-right {
    right: 24px;
}

.fourbrewers-lightbox-arrow-left img {
    transform: scaleX(-1);
}

.fourbrewers-lightbox-arrow-left:hover img {
    transform: scaleX(-1) translateX(8px);
}

.fourbrewers-lightbox-arrow-right:hover img {
    transform: translateX(8px);
}


@media (max-width: 760px) {

    .fourbrewers-lightbox-image {
        max-width: 80vw;
        max-height: 85vh;
    }

    .fourbrewers-lightbox-image img {
        width: 85vw;
        max-width: 85vw;
    }

    .fourbrewers-lightbox-arrow-left {
        left: 8px;
    }

    .fourbrewers-lightbox-arrow-right {
        right: 8px;
    }

    .fourbrewers-lightbox-arrow img {
        width: 48px;
    }

}

html:has(body.project-loud) {
    background: #141415;
}

body.project-loud {
    background: #141415;
}

.project-loud .project-page-title,
.project-loud .project-tag-link {
    color: #fff;
}
/* LOUD ETUDES — DARK PROJECT */

body.project-loud .project-arrow img {
    filter: brightness(0) invert(1);
}

body.project-loud .project-tag-link {
    color: #BEBEBE;
    border-color: rgba(255, 255, 255, 0.4);
}

body.project-loud .project-tag-link:hover {
    color: #BEBEBE;
    border-color: #BEBEBE;
}

@media (min-width: 761px) {

    body.project-loud .project-page > div.container:not(.project-navigation) {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: var(--grid-gap);
    }

    body.project-loud .project-page > div.container:not(.project-navigation) .project-full-image {
        grid-column: 2 / 12;
    }

}

@media (min-width: 761px) {
    body.project-loud .book-full {
        width: 100vw;
        margin-left: calc(50% - 50vw);
    }
}

@media (min-width: 761px) {
    body.project-loud .project-page > div.container .project-full-image.project-loud7 {
        grid-column: 3 / 11;
    }
}

@media (min-width: 761px) {

    body.project-loud .project-video-collage {
        grid-column: 2 / 12;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-top: var(--project-spacing);
    }

    body.project-loud .project-video-collage-item {
        width: 100%;
    }

    body.project-loud .project-video-collage-item video {
        display: block;
        width: 100%;
        height: auto;
    }

}

/* ТРАДИЦИОННАЯ ИГРУШКА — DARK PROJECT */

html:has(body.project-tradition) {
    background: #141415;
}

body.project-tradition {
    background: #141415;
}

/* Заголовок */
body.project-tradition .project-page-title {
    color: #fff;
}

/* Стрелки */
body.project-tradition .project-arrow img {
    filter: brightness(0) invert(1);
}

/* Теги */
body.project-tradition .project-tag-link {
    color: #BEBEBE;
    border-color: rgba(255, 255, 255, 0.4);
}

body.project-tradition .project-tag-link:hover {
    color: #BEBEBE;
    border-color: #BEBEBE;
}

body.project-tradition .project-page,
body.project-tradition .project-page p,
body.project-tradition .project-page h1,
body.project-tradition .project-page h2,
body.project-tradition .project-page h3,
body.project-tradition .project-page span {
    color: #fff;
}