/* Шрифт: временно trial-версия CoFo Sans Mono. Положите файл в fonts/ */
@font-face {
  font-family: "CoFo Sans Mono";
  src: url("fonts/CoFoSansMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --gap: 4px;
  --radius: 4px;
  --black: #000;
  --white: #fff;
  --btn-bg: #f2f2f2;
  --btn-bg-hover: #e6e6e6;
  --font: "CoFo Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--white);
  color: var(--black);
  font: 12px/1.2 var(--font);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
p, h2 { margin: 0; }
h2 { font: inherit; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
a { color: inherit; text-decoration: none; }

/* ---------- Layout ---------- */

.page {
  display: grid;
  grid-template-columns: 475fr 953fr;
  gap: var(--gap);
  padding: var(--gap);
}

/* ---------- Left fixed column ---------- */

.intro {
  position: sticky;
  top: var(--gap);
  height: calc(100vh - var(--gap) * 2);
  height: calc(100svh - var(--gap) * 2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-width: 0;
}

.logo { margin: 0; width: 100%; }
.logo__img { width: 100%; height: auto; }
.logo__img--mobile { display: none; }

.portrait {
  width: 153px;
  height: 200px;
  background: var(--black);
  overflow: hidden;
  flex-shrink: 0;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }

.about {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bio p {
  line-height: 1;
  text-indent: 17ch;
}
.bio p + p { margin-top: 1em; }

.clients {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.clients img { height: auto; }

.socials { display: flex; gap: var(--gap); }

.btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px;
  border-radius: var(--radius);
  background: var(--btn-bg);
  text-align: center;
  white-space: nowrap;
  transition: background-color .2s ease;
}
.btn:hover { background: var(--btn-bg-hover); }

/* ---------- Cases ---------- */

.cases {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-width: 0;
}

.case {
  position: relative;
  aspect-ratio: 953 / 536;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--black);
  color: var(--white);
  /* Отдельный слой для карточки: без этого Safari при скролле
     может «терять» картинку внутри скруглённой маски. */
  isolation: isolate;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.case__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
@media (hover: hover) {
  .case:hover .case__img { transform: scale(1.02) translateZ(0); }
}

.case__name,
.case__type {
  position: absolute;
  bottom: 18px;
}
.case__name { left: 0; width: 234px; text-align: center; }
.case__type { left: 238px; right: 140px; }

.case__badge {
  position: absolute;
  right: var(--gap);
  bottom: var(--gap);
  width: 116px;
  padding: 10px;
  border-radius: var(--radius);
  text-align: center;
  white-space: nowrap;
}
.case__badge--link {
  background: var(--white);
  color: var(--black);
  transition: background-color .2s ease;
}
.case__badge--link:hover { background: #ececec; }
.case__arrow { display: none; }

.case__badge--glass {
  background: rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

/* ---------- Mobile ---------- */

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

  .intro {
    position: static;
    height: auto;
    min-height: max(640px, calc(100svh - 134px));
  }

  .logo__img--desktop { display: none; }
  .logo__img--mobile { display: block; }

  .bio p { line-height: 1.1; }

  .case { aspect-ratio: 382 / 215; }

  .case__name,
  .case__type {
    bottom: 6px;
    font-size: 10px;
    text-align: left;
    width: auto;
  }
  .case__name { left: 4px; right: 52%; text-align: center; }
  .case__type { left: 50%; right: 4px; }

  /* На мобилке плашек нет — вся карточка кликабельна */
  .case__badge {
    position: static;
    width: 0; height: 0; padding: 0;
    overflow: hidden;
    font-size: 0;
  }
  .case__badge--link::after {
    content: "";
    position: absolute;
    inset: 0;
  }
  .case__img { transition: none; }

  .case__arrow {
    display: flex;
    position: absolute;
    top: var(--gap);
    right: var(--gap);
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--btn-bg);
    color: var(--black);
    font-size: 12px;
    pointer-events: none;
  }
}