@font-face {font-family: "Futura PT"; src: url("/fonts/futura-pt-book.woff2") format("woff2"); font-weight: 400; font-display: swap;}
@font-face {font-family: "Futura PT"; src: url("/fonts/futura-pt-demi.woff2") format("woff2"); font-weight: 600; font-display: swap;}
@font-face {font-family: "Futura PT"; src: url("/fonts/futura-pt-bold.woff2") format("woff2"); font-weight: 700; font-display: swap;}

:root {
  --bg: #0f0f11; --fg: #f4f4f2; --dim: #b9b9be; --panel: #17171a;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--bg); color: var(--fg);
  font-family: "Futura PT", "Segoe UI", Arial, sans-serif;
  min-height: 100vh;
}
a { color: inherit; text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: .2em; }
img, video { display: block; max-width: 100%; }
::selection { background: var(--fg); color: var(--bg); }
a:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 2px; }

/* верхняя строка */
.top {
  display: flex; justify-content: space-between; align-items: center;
  max-width: 1280px; margin: 0 auto; padding: 22px 24px;
}
.crumb {
  font-size: 16px; font-weight: 400; color: var(--dim);
}
.crumb:hover { color: var(--fg); }

/* шапка галереи */
.hero { max-width: 1280px; margin: 0 auto; padding: 30px 24px 6px; }
.hero h1 {
  font-family: "Futura PT", "Segoe UI", Arial, sans-serif; font-weight: 400;
  font-size: clamp(46px, 7vw, 78px); line-height: 1.02; letter-spacing: .02em;
}
.hero .sub {
  margin-top: 10px; font-size: 13px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--dim);
}

/* сетка работ */
.grid {
  max-width: 1280px; margin: 0 auto; padding: 26px 24px 60px;
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.work { text-decoration: none; }
.thumb {
  aspect-ratio: 808 / 632;      /* кроп обложек Behance */
  background: var(--panel); overflow: hidden;
}
.thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s ease, filter .35s ease;
}
.work:hover .thumb img { transform: scale(1.015); filter: brightness(1.06); }
.wt {
  display: block; margin-top: 10px;
  font-family: "Futura PT", "Segoe UI", Arial, sans-serif; font-weight: 400;
  font-size: 25px; line-height: 1.08;
  text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: .2em;
}
.wy {
  display: block; margin-top: 3px;
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim);
}

/* страница кейса */
.case { max-width: 1200px; margin: 0 auto; padding: 10px 24px 0; }
.case h1 {
  font-family: "Futura PT", "Segoe UI", Arial, sans-serif; font-weight: 400;
  font-size: clamp(36px, 6vw, 60px); line-height: 1.12; margin-top: 18px;
}
.case .meta {
  margin-top: 12px; font-size: 15px; font-weight: 400;
  color: var(--dim); line-height: 1.6;
}
.case .desc {
  max-width: 720px; margin-top: 22px;
  font-family: "Futura PT", "Segoe UI", Arial, sans-serif;
  font-size: 16.5px; line-height: 1.65; color: #d9d9d6;
}
.case .desc p + p { margin-top: 12px; }
.media { display: flex; flex-direction: column; gap: 26px; margin-top: 34px; }
.media img, .media video { width: 100%; height: auto; background: var(--panel); }

/* низ страницы */
.end {
  max-width: 1200px; margin: 0 auto; padding: 46px 24px 64px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.pill {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 16px; font-weight: 400; color: var(--fg);
}
.copy {
  font-size: 12px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim);
}

@media (max-width: 640px) {
  .top { padding: 16px 18px; }
  .hero { padding: 22px 18px 2px; }
  .grid { padding: 20px 18px 48px; gap: 16px;
          grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .wt { font-size: 20px; }
  .case { padding: 8px 18px 0; }
  .case h1 { margin-top: 12px; }
  .media { gap: 18px; margin-top: 26px; }
  .end { padding: 36px 18px 52px; }
  .pill { height: 42px; padding: 0 22px; font-size: 12px; }
}