@font-face {
  font-family: 'Dela Gothic One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/dela-gothic-one-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Dela Gothic One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/dela-gothic-one-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/manrope-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/manrope-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --asphalt: #302f2c;
  --paper: #efede3;
  --panel: color-mix(in srgb, var(--asphalt) 92%, var(--paper));
  --panel-hover: color-mix(in srgb, var(--asphalt) 82%, var(--paper));
  --quiet: color-mix(in srgb, var(--asphalt) 84%, var(--paper));
  --quiet-dark: color-mix(in srgb, var(--paper) 80%, var(--asphalt));
  --space: clamp(18px, 3.35vw, 52px);
  --photo-radius: 10px;
  --display: "Dela Gothic One", "Arial Black", Arial, sans-serif;
  --body: "adineue PRO Cyr", "Manrope", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  --plan-image: url("assets/floor-plan.svg");
  --plan-field: var(--plan-image) repeat 50% -28px / clamp(360px, 50vw, 760px) auto;
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  background: var(--plan-field);
  background-color: var(--paper);
  color: var(--asphalt);
  font-family: var(--body);
}
body::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: var(--plan-field);
  mask-image: linear-gradient(112deg, transparent 38%, black 50%, transparent 62%); /* taste-skill-ignore: transparency mask for moving ink */
  mask-size: 240% 100%;
  mask-repeat: no-repeat;
  opacity: 0;
  animation: plan-shimmer 5s linear infinite;
}
body[data-page-hidden]::before { animation-play-state: paused; }

@keyframes plan-shimmer {
  0% { opacity: 0; mask-position: 100% 0; }
  6% { opacity: .62; mask-position: 80% 0; }
  24% { opacity: .62; mask-position: 20% 0; }
  30%, 100% { opacity: 0; mask-position: 0 0; }
}

h1, h2, p, figure { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: -5px; }
::selection { background: var(--asphalt); color: var(--paper); }

.profile { max-width: 1760px; margin-inline: auto; padding: 0 var(--space) clamp(18px, 2.25vw, 32px); }
.masthead { overflow-x: clip; }
.identity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(22px, 3.35vw, 48px) clamp(20px, 2.4vw, 36px);
  font-size: 0.875rem;
  line-height: 1.4;
}
.identity__company {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: clamp(1rem, 1.55vw, 1.25rem);
  font-weight: 800;
  letter-spacing: -.04em;
}
.identity__logo {
  display: block;
  width: clamp(32px, 3.6vw, 46px);
  height: auto;
  flex: none;
}
.identity__role {
  font: 400 clamp(.75rem, 1.3vw, 1rem) / 1.2 var(--display);
  text-align: right;
  color: var(--asphalt);
}

.name {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .06em;
  margin: 0 0 clamp(18px, 2vw, 30px);
  font: 400 var(--name-size, min(6.9vw, 120px)) / .98 var(--display);
  letter-spacing: -.024em;
  text-transform: uppercase;
}
.name span { display: block; width: max-content; }

.spread {
  display: grid;
  grid-template-columns: minmax(0, 2.15fr) minmax(330px, 1fr);
  overflow: clip;
  border-radius: var(--photo-radius);
  background: var(--asphalt);
  color: var(--paper);
}
.photographs {
  display: grid;
  min-width: 0;
  grid-template-columns: 45% 55%;
  min-height: clamp(466px, 36vw, 590px);
}
.portrait, .architecture { position: relative; overflow: hidden; min-width: 0; }
.portrait { background: var(--asphalt); border-radius: var(--photo-radius); }
.portrait img, .architecture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.portrait img { position: absolute; object-position: 55% 36%; }
.architecture { background: var(--asphalt); }
.architecture__frames { position: absolute; inset: 0; overflow: hidden; }
.frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  object-position: 50% 20%;
  transition: opacity .6s ease, transform .8s cubic-bezier(.2, .65, .3, 1);
  transform: translateX(1.25%) scale(1.04);
}
.frame.is-current { opacity: 1; transform: scale(1); }
.frame:nth-child(2) { object-position: 50% 76%; }

.directory {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(20px, 2vw, 34px);
  min-width: 0;
  padding: clamp(24px, 2.55vw, 40px);
}
.directory__heading {
  font: 400 clamp(1.3rem, 1.95vw, 2.1rem) / 1.12 var(--display);
  text-transform: uppercase;
}
.directory__links { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.destination {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 75px;
  gap: 5px;
  padding: 11px 48px 11px 15px;
  border-radius: 7px;
  background: var(--panel);
  color: var(--paper);
  text-decoration: none;
  transition: background .24s ease, transform .28s cubic-bezier(.2, .7, .3, 1);
}
.destination--company { border-radius: var(--photo-radius); }
.destination--primary { background: var(--paper); color: var(--asphalt); }
.destination__platform { font: 400 1rem / 1.15 var(--display); }
.destination__title { font-size: .682500rem; font-weight: 600; line-height: 1.3; color: var(--quiet-dark); }
.destination--primary .destination__title { color: var(--quiet); }
.destination__icon {
  position: absolute;
  right: 16px;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
}
.destination__platform, .destination__title, .destination__icon {
  transition: transform .28s cubic-bezier(.2, .7, .3, 1);
}
.destination {
  --destination-feedback: var(--panel-hover);
}
.destination--primary {
  --destination-feedback: color-mix(in srgb, var(--paper) 90%, var(--asphalt));
}
.destination:active {
  background: var(--destination-feedback);
  transform: scale(.987);
}
.destination:focus-visible { background: var(--destination-feedback); }

@media (hover: hover) and (pointer: fine) {
  .destination:hover { background: var(--destination-feedback); }
  .destination:hover .destination__platform,
  .destination:hover .destination__title { transform: translateX(3px); }
  .destination:hover .destination__icon { transform: translate(2px, -50%) scale(1.12); }
}

.enter { animation: enter .5s cubic-bezier(.2, .65, .32, 1) both; }
.identity__role { animation-delay: 45ms; }
.name { animation-delay: 75ms; }
.portrait { animation-delay: 120ms; }
.architecture { animation-delay: 155ms; }
.directory__heading { animation-delay: 180ms; }
.directory li:nth-child(1) { animation-delay: 210ms; }
.directory li:nth-child(2) { animation-delay: 245ms; }
.directory li:nth-child(3) { animation-delay: 280ms; }
.directory li:nth-child(4) { animation-delay: 315ms; }
@keyframes enter { from { opacity: 0; transform: translateY(12px); } }

@media (max-width: 1050px) {
  .spread { grid-template-columns: minmax(0, 1.55fr) minmax(285px, 1fr); }
  .directory { padding: 23px; }
  .photographs { min-height: 434px; }
}

@media (max-width: 720px) {
  .identity { padding-block: 20px 28px; gap: 14px; }
  .name {
    display: block;
    margin-bottom: 18px;
    font-size: var(--name-size, 10.5vw);
  }
  .name span + span { margin-top: .075em; }
  .spread { display: block; }
  .photographs {
    min-height: 0;
    height: clamp(198px, 58vw, 346px);
    grid-template-columns: 57% 43%;
  }
  .portrait img { object-position: 55% 30%; }
  .directory { gap: 16px; padding: 20px 14px 14px; }
  .directory__heading { font-size: clamp(1.15rem, 4.6vw, 1.7rem); }
  .destination { min-height: 61px; }
}

@media (prefers-reduced-motion: reduce) {
  body::before, .enter { animation: none; }
  .frame, .destination, .destination__platform, .destination__title, .destination__icon {
    transition: none;
  }
  .destination:active,
  .destination:hover .destination__platform,
  .destination:hover .destination__title { transform: none; }
  .destination:hover .destination__icon { transform: translateY(-50%); }
  .frame { transform: none; }
}