@font-face{font-family:areal;src:url('assets/ABCArealSuperfamilyVariable.woff2') format('woff2');font-weight:100; font-style:normal;font-display:swap}

:root{color-scheme:dark;--scale:0.3;--rail:104px;--edge:40px;--column:560px;--gap:60px;--frame-top:64px;--frame-bottom:64px;background:#000;color:#fff;font-family:areal,Arial,sans-serif; font-size: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);line-height:1.2;text-align:center}

*{box-sizing:border-box}html{scroll-behavior:auto;overscroll-behavior:none}body{margin:0;background:#000}button,input,textarea{font:inherit;color:inherit}a{color:inherit;text-underline-offset:.15em}button{cursor:pointer}button,figure,p,h1{margin:0}h1{font:inherit}button{border:0;background:transparent;padding:0}img{display:block;max-width:none}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #fff;outline-offset:6px}.skip{position:fixed;top:8px;left:8px;z-index:20;transform:translateY(-200%)}.skip:focus{transform:none}

.index-link{position:fixed;z-index:10;width:292px;height:292px;top:-146px;right:-92px;opacity:.4;overflow:hidden}.index-link img{width:100%;height:100%}

.slide{min-height:100dvh;display:grid;grid-template-columns:var(--rail) minmax(0,1fr) var(--rail);align-items:center;position:relative}.composition{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--gap);padding-block:var(--frame-top) var(--frame-bottom);min-width:0}.slide-label,.slide-number{grid-row:1;justify-self:center;white-space:nowrap;writing-mode:vertical-rl;transform:rotate(180deg);opacity:0;transition:opacity 100ms linear}.slide-label{grid-column:1;justify-self:start;margin-left:var(--edge)}.slide-number{grid-column:3;justify-self:end;margin-right:var(--edge)}.labels-visible>.slide-label,.labels-visible>.slide-number{opacity:1}
/* основная композиция */
.media-composition {
  display: block;
  flex: none;
  width: calc(var(--w) * var(--scale) * 1px);
  height: calc(var(--h) * var(--scale) * 1px);
  transform-origin: center;
}

/* изображения внутри композиции */
.media-composition > img,
.media-composition > picture,
.media-composition > picture > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* группа медиа без промежутков */
.media-group {
  display: flex;
  align-items: center;
  gap: 0;
}

/* отдельный элемент внутри группы */
.media-part {
  display: block;
  flex: none;
  width: calc(var(--part-w) * var(--scale) * 1px);
  height: calc(var(--part-h) * var(--scale) * 1px);
}

/* изображения внутри элементов группы */
.media-part img,
.media-part picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* ссылка на медиа */
.media-link {
  display: block;
  text-decoration: none;
}

/* текст и форма */
.body-copy,
.enquiry {
  width: min(100%, var(--column));
  text-align: center;
}

.body-copy p {
  overflow-wrap: break-word;
}

.body-copy a {
  white-space: normal;
}

/* сцена с маркой и изображениями */
.intro-scene {
  display: grid;
  place-items: center;
  position: relative;
}

/* марка поверх изображений */
.intro-scene .intro-stamp {
  grid-area: 1 / 1;
  width: calc(362px * var(--scale));
  height: calc(482px * var(--scale));
  z-index: 1;
  pointer-events: none;
}

/* наложенные друг на друга изображения */
.paintings {
  grid-area: 1 / 1;
  display: grid;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* скрываем все изображения по умолчанию */
.paintings img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
}

/* показываем изображение, соответствующее кадру */
.intro-scene[data-frame="1"] .paintings img:nth-child(1),
.intro-scene[data-frame="2"] .paintings img:nth-child(2),
.intro-scene[data-frame="3"] .paintings img:nth-child(3),
.intro-scene[data-frame="4"] .paintings img:nth-child(4),
.intro-scene[data-frame="5"] .paintings img:nth-child(5) {
  opacity: 1;
}
.enquiry{display:flex;flex-direction:column;align-items:center;gap:28px}.field{display:flex;flex-direction:column;gap:12px;width:100%}.field input,.field textarea{border:0;border-bottom:1px solid #fff;border-radius:0;background:none;text-align:center;width:100%;padding:10px 0;min-height:52px}.field textarea{min-height:120px;resize:vertical}.field textarea::placeholder{color:#999}.form-status:empty{display:none}.media-button{display:block}.index-header{display:flex;justify-content:center;padding:40px}.index-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:60px 24px;padding:40px}.index-item{display:flex;flex-direction:column;align-items:center;gap:24px;text-decoration:none;min-width:0}.thumbnail{display:flex;align-items:center;justify-content:center;min-height:var(--thumbnail-height)}.thumbnail .media-composition{width:calc(var(--w)*var(--scale)*.25px);height:calc(var(--h)*var(--scale)*.25px)}.thumbnail .media-part{width:calc(var(--part-w)*var(--scale)*.25px);height:calc(var(--part-h)*var(--scale)*.25px)}.thumbnail .intro-stamp{width:calc(362px*var(--scale)*.25);height:calc(482px*var(--scale)*.25)}.index-footer{padding:40px}.layout-measure{position:fixed;visibility:hidden;pointer-events:none;left:0;top:0;width:var(--column);z-index:-1}

.slide-label,.slide-number{opacity:0;transition:opacity 1000ms ease-in-out}

/* full-screen image viewer */
.image-viewer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #000;
  cursor: zoom-out;
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms ease;
}

.image-viewer:not(.is-open) {
  transition: none;
}

.image-viewer.is-open {
  opacity: 1;
  visibility: visible;
}

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

@media(hover:hover) and (pointer:fine){.composition .media-composition{transition:transform 130ms cubic-bezier(.2,.8,.2,1)}.composition .media-composition:hover{transform:scale(1.025)}}
@media(max-width:1099px){#our-approach .media-group{flex-direction:column;gap:32px;width:calc(363*var(--scale)*1px);height:calc(1449*var(--scale)*1px + 64px)}:root{--rail:24px;--edge:24px;--frame-top:32px;--frame-bottom:32px}.slide{grid-template-columns:24px minmax(0,1fr) 24px;grid-template-rows:auto 1fr auto}.slide-label,.slide-number{grid-column:2;writing-mode:horizontal-tb;transform:none;justify-self:center;margin:0;white-space:normal}.slide-label{grid-row:1;padding-top:40px;;overflow-wrap:break-word}.slide-number{grid-row:3;padding-bottom:40px}.composition{grid-row:2}.index-link{width:176px;height:176px;top:-44px;right:-80px}.index-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:24px;gap:60px 20px}.index-header{padding:40px 24px}.index-footer{padding:40px 24px}}

@media(prefers-reduced-motion:reduce){.slide-label,.slide-number,.composition .media-composition{transition:none}}

/* Native trackpad and touch navigation; tall slides can scroll internally. */
html{scroll-snap-type:y mandatory}
.slide{scroll-snap-align:start;scroll-snap-stop:always}
html[data-transitioning]{scroll-snap-type:none}

/* Text tracking and navigation opacity follow the designer’s specification. */
:root{letter-spacing:-0.02em}
button,input,textarea,select{letter-spacing:inherit}
.labels-visible>.slide-label,.labels-visible>.slide-number,.index-header h1,.index-item .caption{opacity:.4}

/* Mobile approach cards provide skippable snap points within the longer slide. */
@media (max-width: 1099px) {
  #our-approach .media-part:not(:first-child) {
    scroll-snap-align: center;
    scroll-snap-stop: normal;
  }
}

/* Keep the three quarter-size approach thumbnails together on mobile. */
@media (max-width: 1099px) {
  .index-item[data-slide="our-approach"] { grid-column: 1 / -1; }
}

/* The artwork changes softly without moving or resizing the stamp. */
.paintings img{transition:opacity 160ms linear}
@media (prefers-reduced-motion:reduce){.paintings img{transition:none}}

/* Constrain both grid layers to the 4:3 scene so neither can overlap the copy. */
.intro-scene{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.paintings,.paintings img{min-width:0;min-height:0}
.form-note{font-size:max(14px,.8em);line-height:1.35}

/* The enquiry form needs to fit within the mobile composition. */
@media (max-width:1099px){
  .form-slide .slide-label{padding-top:24px}
  .form-slide .slide-number{padding-bottom:24px}
  .form-slide .composition{gap:12px;padding-block:12px}
  .form-slide .body-copy{max-width:34ch;font-size:max(14px,1em);line-height:1.25}
  .form-slide .enquiry{max-width:420px;gap:8px}
  .form-slide .field{gap:3px}
  .form-slide .field span{font-size:max(14px,.9em)}
  .form-slide .field input,.form-slide .field textarea{font-size:16px;padding:4px 0;min-height:34px}
  .form-slide .field textarea{height:64px;min-height:64px;resize:vertical}
  .form-slide .form-note,.form-slide .form-status{font-size:13px;line-height:1.25}
}