:root { --image-gap: 10px; }

.language-switch {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  white-space: nowrap;
}
.language-switch button { display: inline-flex; flex-shrink: 0; }
.works-canvas, .case-canvas { height: auto; }

.works-canvas .gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: var(--image-gap);
  margin: 0 89px 0 90px;
  padding: 226px 0 80px;
}
.work-column {
  display: flex;
  flex-direction: column;
  gap: var(--image-gap);
}
.work-column:first-child { padding-top: 36px; }
.work-column:last-child { padding-top: 42px; }
.works-canvas .work {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  height: auto;
  overflow: visible;
  aspect-ratio: var(--ratio);
  transform: perspective(1100px) translate3d(var(--mx,0px),var(--my,0px),0)
    rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--scale,1));
  transform-style: preserve-3d;
  transition: transform 550ms cubic-bezier(.16,1,.3,1), box-shadow 550ms ease;
}
.works-canvas .work img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.works-canvas .work:hover img { filter: none; }
@media (hover:hover) and (pointer:fine) {
  .works-canvas .work:hover {
    --scale: 1.025;
    z-index: 50;
    box-shadow: 0 20px 34px -12px rgba(0,0,0,.28);
  }
}

.case-canvas .case-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--image-gap);
  margin: 0 90px;
  padding: 267px 0 80px;
}
.case-columns {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  align-items: start;
  gap: var(--image-gap);
}
.case-columns.split-three { grid-template-columns: minmax(0,1fr) minmax(0,2fr); }
.case-column {
  display: flex;
  flex-direction: column;
  gap: var(--image-gap);
  min-width: 0;
}
.case-band {
  display: grid;
  grid-template-columns: repeat(var(--columns,1),minmax(0,1fr));
  align-items: start;
  gap: var(--image-gap);
}
.case-canvas .case-media {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  height: auto;
  margin: 0;
  aspect-ratio: var(--ratio);
  overflow: hidden;
}
.case-canvas .case-media > img:not(.art-mark) {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.case-canvas .case-media.wide { grid-column: 1 / -1; }

body.profile-page { background: #fff; }
.profile-canvas .nav-links [data-panel="contacts"] { display: none; }
.profile-canvas { height: auto; min-height: 1080px; background: #fff; }
.profile-layout {
  display: grid;
  grid-template-columns: 412px minmax(0,1fr);
  gap: 19px;
  align-items: start;
  margin: 0 89px 0 91px;
  padding-top: 200px;
}
.profile-photo { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.profile-copy, .profile-contacts {
  font-family: "JetBrains Mono","IBM Plex Mono",monospace;
  font-size: 18px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: .2px;
}
.profile-copy p { margin: 0 0 18px; }
.profile-copy p:last-child { margin-bottom: 0; }
.profile-copy[hidden] { display: none; }
.profile-contacts {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 20px;
  margin: 85px 89px 0 522px;
  padding-bottom: 160px;
  letter-spacing: .3px;
}
.profile-contacts a { text-decoration: none; }
.profile-contacts a:hover { text-decoration: underline; }

@media (max-width:1023px) {
  .works-canvas .gallery {
    padding: 0;
    margin: 0;
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .work-column { display: contents; }
  .case-canvas .case-gallery { margin: 0; padding: 0; }
  .profile-canvas { min-height: 0; }
  .profile-layout {
    grid-template-columns: minmax(0,1fr) minmax(0,2fr);
    gap: 20px;
    margin: 0;
    padding-top: 74px;
  }
  .profile-copy, .profile-contacts { font-size: 15px; line-height: 1.4; }
  .profile-contacts { margin: 54px 0 0; padding-bottom: 0; }
}
@media (max-width:620px) {
  .works-canvas .gallery { grid-template-columns: minmax(0,1fr); }
  .profile-layout { grid-template-columns: minmax(0,1fr); padding-top: 58px; }
  .profile-photo { max-width: 412px; }
  .profile-copy { font-size: 14px; line-height: 1.4; }
  .profile-contacts { font-size: 12px; line-height: 1.4; gap: 18px; }
  .case-band[style*="--columns:4"] { grid-template-columns: repeat(2,minmax(0,1fr)); }
  [data-case="reboot-smm"] .case-band { grid-template-columns: minmax(0,1fr); }
}
@media (prefers-reduced-motion:reduce) {
  .works-canvas .work {
    transform: none;
    transition: none;
  }
}