.type-display-2xl {
  font-family: var(--type-display-2xl-family);
  font-weight: var(--type-display-2xl-weight);
  font-size: var(--type-display-2xl-size);
  line-height: var(--type-display-2xl-line-height);
  letter-spacing: var(--type-display-2xl-tracking);
  margin: 0;
}

.type-display-xl {
  font-family: var(--type-display-xl-family);
  font-weight: var(--type-display-xl-weight);
  font-size: var(--type-display-xl-size);
  line-height: var(--type-display-xl-line-height);
  letter-spacing: var(--type-display-xl-tracking);
  margin: 0;
}

.type-display-md {
  font-family: var(--type-display-md-family);
  font-weight: var(--type-display-md-weight);
  font-size: var(--type-display-md-size);
  line-height: var(--type-display-md-line-height);
  letter-spacing: var(--type-display-md-tracking);
  margin: 0;
}

.type-heading-lg {
  font-family: var(--type-heading-lg-family);
  font-weight: var(--type-heading-lg-weight);
  font-size: var(--type-heading-lg-size);
  line-height: var(--type-heading-lg-line-height);
  letter-spacing: var(--type-heading-lg-tracking);
  margin: 0;
}

.type-body-lg {
  font-family: var(--type-body-lg-family);
  font-weight: var(--type-body-lg-weight);
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-line-height);
  letter-spacing: var(--type-body-lg-tracking);
  font-style: var(--type-body-lg-style);
  margin: 0;
}

.type-body-lg-italic,
.type-body-md-italic {
  font-family: var(--type-body-md-italic-family);
  font-weight: var(--type-body-md-italic-weight);
  font-size: var(--type-body-md-italic-size);
  line-height: var(--type-body-md-italic-line-height);
  letter-spacing: var(--type-body-md-italic-tracking);
  font-style: var(--type-body-md-italic-style);
  margin: 0;
}

.type-body-lg-underline {
  font-family: var(--type-body-lg-family);
  font-weight: var(--type-body-lg-weight);
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-line-height);
  letter-spacing: var(--type-body-lg-tracking);
  font-style: var(--type-body-lg-style);
  text-decoration-line: underline;
  text-decoration-thickness: 2%;
  text-underline-offset: 0.25em;
  text-decoration-skip-ink: auto;
  text-decoration-color: var(--color-olive-400);
  margin: 0;
}

.type-body-lg-italic-underline {
  font-family: var(--type-body-md-italic-family);
  font-weight: var(--type-body-md-italic-weight);
  font-size: var(--type-body-md-italic-size);
  line-height: var(--type-body-md-italic-line-height);
  letter-spacing: var(--type-body-md-italic-tracking);
  font-style: var(--type-body-md-italic-style);
  text-decoration-line: underline;
  text-decoration-thickness: 2%;
  text-underline-offset: 0.25em;
  text-decoration-skip-ink: auto;
  text-decoration-color: var(--color-olive-400);
  margin: 0;
}

.type-caption {
  font-family: var(--type-caption-family);
  font-weight: var(--type-caption-weight);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
  letter-spacing: var(--type-caption-tracking);
  margin: 0;
}

.link-underline {
  text-decoration-line: underline;
  text-decoration-thickness: var(--link-underline-thickness, 2%);
  text-underline-offset: var(--link-underline-offset, 0.25em);
  text-decoration-skip-ink: auto;
  text-decoration-color: var(--link-underline-color, currentColor);
}

.link-underline:hover {
  text-decoration-thickness: var(--link-underline-thickness-hover, var(--link-underline-thickness, 2%));
  text-decoration-color: var(--link-underline-hover-color, var(--link-underline-color, currentColor));
}

.link-caption {
  --link-underline-thickness: 5%;
  --link-underline-thickness-hover: 10%;
  --link-underline-hover-color: var(--color-text-accent-red);
}

.link-body {
  --link-underline-thickness: 2%;
  --link-underline-thickness-hover: 4%;
  --link-underline-hover-color: var(--color-text-accent-red);
}

.link-title-italic-underline {
  --link-underline-thickness: 3%;
  --link-underline-thickness-hover: 6%;
  --link-underline-offset: 0.16em;
}

.link-table-action:hover {
  color: var(--color-text-accent-red);
}

.link-footer-accent:hover {
  color: var(--color-text-accent-seafoam);
}

.type-caps {
  font-family: var(--type-caps-family);
  font-weight: var(--type-caps-weight);
  font-size: var(--type-caps-size);
  line-height: var(--type-caps-line-height);
  letter-spacing: var(--type-caps-tracking);
  text-transform: var(--type-caps-transform);
  margin: 0;
}

.primary-nav {
  display: flex;
  gap: var(--space-600);
}

.nav-link {
  font-family: var(--type-caption-family);
  font-weight: var(--type-caption-weight);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
  letter-spacing: var(--type-caption-tracking);
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.nav-link:hover {
  border-bottom-color: currentColor;
}

.nav-link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.site-header__grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--space-grid-gap);
  padding-inline: var(--space-page-padding);
}

.site-header__menu {
  grid-column: 5 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-inline-size: 0;
  position: relative;
  top: 0;
  pointer-events: none;
}

.site-header__project {
  display: none;
  align-items: center;
  justify-self: start;
  align-self: start;
  grid-column: 1 / span 2;
  max-inline-size: 100%;
  position: relative;
  top: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  overflow: visible;
  padding: var(--space-150) var(--space-300) var(--space-200);
  pointer-events: auto;
}

.site-header__nav,
.site-header__project,
.site-header__contact,
.site-header__mobile-trigger {
  position: relative;
  border-radius: var(--radius-sm);
  background: transparent;
  overflow: visible;
}

.site-header-glass {
  position: fixed;
  inset: 0;
  z-index: var(--layer-header-glass);
  pointer-events: none;
}

.site-header-glass__item {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: none;
  inline-size: 0;
  block-size: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--header-overlay-bg);
  backdrop-filter: blur(var(--header-overlay-blur));
  -webkit-backdrop-filter: blur(var(--header-overlay-blur));
  z-index: var(--layer-header-glass);
  pointer-events: none;
}

.site-header__list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-600);
  margin: 0;
  padding: var(--space-150) var(--space-300) var(--space-200);
}

.nav-link.site-header__link,
.nav-link.site-header__project,
.nav-link.site-header__contact,
.nav-link.site-header__mobile-trigger {
  color: var(--color-text-primary);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 0;
  pointer-events: auto;
}

.site-header__text {
  display: inline-block;
  color: var(--color-white);
  mix-blend-mode: difference;
}

.has-header-visual-text .site-header__text {
  color: transparent;
  mix-blend-mode: normal;
}

.site-header__visual-text-layer {
  pointer-events: none;
}

.site-header__visual-text {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: none;
  font-family: var(--type-caption-family);
  font-weight: var(--type-caption-weight);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
  letter-spacing: var(--type-caption-tracking);
  color: var(--color-white);
  white-space: nowrap;
  mix-blend-mode: difference;
  z-index: var(--layer-header-text);
  pointer-events: none;
}

.site-header__hit-layer {
  pointer-events: none;
}

.site-header__hit-link {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: none;
  overflow: hidden;
  color: transparent;
  text-decoration: none;
  white-space: nowrap;
  z-index: var(--layer-header-hit);
  pointer-events: auto;
  cursor: pointer;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header-glass__item,
  .tag::before {
    background: var(--color-overlay-fallback);
  }
}

@supports not (mix-blend-mode: difference) {
  .tag__text,
  .site-header__text {
    mix-blend-mode: normal;
    color: var(--color-text-primary);
  }

  .site-header__visual-text {
    mix-blend-mode: normal;
    color: var(--color-white);
  }
}

.site-header__contact,
.site-header__mobile-trigger {
  display: inline-flex;
  align-items: center;
  padding: var(--space-150) var(--space-300) var(--space-200);
}

.site-header__mobile-trigger {
  display: none;
}

@media (min-width: 1024px) {
  .site-header__project {
    display: inline-flex;
    width: fit-content;
  }
}

.site-header__link:focus-visible,
.site-header__contact:focus-visible,
.site-header__mobile-trigger:focus-visible {
  opacity: 1;
}

@media (max-width: 767px) {
  .site-header__menu {
    grid-column: 1 / -1;
  }

  .site-header__list {
    gap: 0;
  }

  .site-header__list li:not(:first-child) {
    display: none;
  }

  .site-header__contact {
    display: none;
  }

  .site-header__mobile-trigger {
    display: inline-flex;
  }
}

.mobile-menu[hidden] {
  display: none;
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--layer-mobile-menu);
  background: var(--header-overlay-bg);
  backdrop-filter: blur(var(--mobile-menu-overlay-blur));
  -webkit-backdrop-filter: blur(var(--mobile-menu-overlay-blur));
  overflow: hidden;
  block-size: 100vh;
  block-size: 100svh;
}

@supports (block-size: 100dvh) {
  .mobile-menu {
    block-size: 100dvh;
  }
}

.mobile-menu__inner {
  min-block-size: 100vh;
  min-block-size: 100svh;
  display: flex;
  flex-direction: column;
}

@supports (min-block-size: 100dvh) {
  .mobile-menu__inner {
    min-block-size: 100dvh;
  }
}

.mobile-menu__header {
  position: sticky;
  inset-block-start: 0;
  padding: 24px var(--space-page-padding);
  display: flex;
  justify-content: flex-end;
}

.mobile-menu__close {
  appearance: none;
  border: 0;
  background: transparent;
  padding: var(--space-150) var(--space-300) var(--space-200);
  border-radius: var(--radius-sm);
  position: relative;
  cursor: pointer;
  color: var(--color-white);
  mix-blend-mode: difference;
  white-space: nowrap;
}

.mobile-menu__close::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--header-overlay-bg);
  backdrop-filter: blur(var(--mobile-menu-overlay-blur));
  -webkit-backdrop-filter: blur(var(--mobile-menu-overlay-blur));
  mix-blend-mode: plus-lighter;
  pointer-events: none;
}

.mobile-menu__close:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.mobile-menu__nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-page-padding);
}

.mobile-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-800);
  inline-size: 100%;
}

.mobile-menu__link {
  display: block;
  color: var(--color-white);
  text-decoration: none;
  mix-blend-mode: difference;
  font-family: var(--type-display-2xl-family);
  font-weight: var(--type-display-2xl-weight);
  font-size: var(--type-display-2xl-size);
  line-height: var(--type-display-2xl-line-height);
  letter-spacing: var(--type-display-2xl-tracking);
}

.mobile-menu__link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 6px;
}

html.is-mobile-menu-open,
html.is-mobile-menu-open body {
  overflow: hidden;
}

html.is-mobile-menu-open .site-header,
html.is-mobile-menu-open .site-header-glass,
html.is-mobile-menu-open .site-header__visual-text-layer,
html.is-mobile-menu-open .site-header__hit-layer {
  display: none;
}

.mobile-menu__visual-text-layer {
  pointer-events: none;
}

.mobile-menu__visual-text {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: none;
  color: var(--color-white);
  mix-blend-mode: difference;
  z-index: var(--layer-mobile-menu-text);
  pointer-events: none;
  white-space: nowrap;
}

html.has-mobile-menu-visual-text.is-mobile-menu-open .mobile-menu__close,
html.has-mobile-menu-visual-text.is-mobile-menu-open .mobile-menu__link {
  color: transparent;
  mix-blend-mode: normal;
}

@supports not (mix-blend-mode: difference) {
  .mobile-menu__link,
  .mobile-menu__close {
    mix-blend-mode: normal;
    color: var(--color-text-primary);
  }

  .mobile-menu__visual-text {
    mix-blend-mode: normal;
    color: var(--color-text-primary);
  }
}

.card {
  position: relative;
  grid-column: span 6;
  border-radius: var(--card-radius);
  isolation: isolate;
  overflow: hidden;
}

html.has-scroll-reveal [data-reveal="scale"],
html.has-scroll-reveal .scroll-reveal-target {
  --reveal-delay: 0ms;

  opacity: 0;
  transform: scale(0.94);
  transform-origin: top left;
  transition:
    transform 720ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay),
    opacity 100ms linear var(--reveal-delay);
  will-change: transform;
}

html.has-scroll-reveal [data-reveal="scale"].is-revealed,
html.has-scroll-reveal .scroll-reveal-target.is-revealed {
  opacity: 1;
  transform: scale(1);
  will-change: auto;
}

html.has-scroll-reveal .case-hero.case-hero--mos .case-hero__media,
html.has-scroll-reveal .case-content .mos-media,
html.has-scroll-reveal .case-content .schrift-shop-comp [data-reveal="scale"] {
  transform-origin: center;
}

html.has-scroll-reveal .mezhdu-collage-composition .mezhdu-collage-composition__item.scroll-reveal-target {
  transform-origin: center;
  transform: var(--mezhdu-item-transform) scale(0.94);
}

html.has-scroll-reveal .mezhdu-collage-composition .mezhdu-collage-composition__item.scroll-reveal-target.is-revealed {
  transform: var(--mezhdu-item-transform) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  html.has-scroll-reveal [data-reveal="scale"],
  html.has-scroll-reveal .scroll-reveal-target {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }

  html.has-scroll-reveal .mezhdu-collage-composition .mezhdu-collage-composition__item.scroll-reveal-target,
  html.has-scroll-reveal .mezhdu-collage-composition .mezhdu-collage-composition__item.scroll-reveal-target.is-revealed {
    transform: var(--mezhdu-item-transform);
  }
}

.card__link {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: inherit;
}

.card__link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.card__clip {
  position: relative;
  overflow: hidden;
  border-radius: var(--card-radius);
  z-index: 1;
}

.card__media {
  position: relative;
  inline-size: 100%;
  overflow: hidden;
  border-radius: var(--card-radius);
}

.media--schrift-foundry {
  aspect-ratio: 1095 / 698;
}

.media--top2019 {
  aspect-ratio: 603 / 603;
}

.media--schrift-publishers {
  aspect-ratio: 1095 / 600;
}

.media--specimen {
  aspect-ratio: 480 / 678;
}

.media--schrift-shop {
  aspect-ratio: 1095 / 661;
}

.media--humans {
  aspect-ratio: 1095 / 620;
}

.media--mybox {
  aspect-ratio: 1 / 1;
}

.media--madebymad {
  aspect-ratio: 1095 / 640;
}

.media--secretkitchen {
  aspect-ratio: 726 / 726;
}

.media--particle {
  aspect-ratio: 1095 / 687;
}

.media--shader {
  aspect-ratio: 849 / 640;
}

.media--mezhdu {
  aspect-ratio: 1095 / 640;
}

.media--nostalgia {
  aspect-ratio: 603 / 603;
}

.media--utochka {
  aspect-ratio: 1095 / 687;
}

.media--mos {
  aspect-ratio: 480 / 640;
}

.media--roger {
  aspect-ratio: 1095 / 640;
}

.media--untitled {
  aspect-ratio: 726 / 726;
}

.card__media img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Progressive images (blur-up / LQIP) */
.pimg {
  display: grid;
  inline-size: 100%;
  max-inline-size: 100%;
  overflow: hidden;
  overflow: clip;
}

.pimg__placeholder,
.pimg__picture,
.pimg > .pimg__full {
  grid-area: 1 / 1;
}

.pimg__placeholder {
  display: block;
  inline-size: 100%;
  block-size: auto;
  filter: blur(96px);
  transform: scale(1.05);
  opacity: 1;
  transition: opacity 450ms cubic-bezier(0.16, 1, 0.3, 1) 120ms;
}

.pimg__picture {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.pimg__full {
  display: block;
  inline-size: 100%;
  block-size: auto;
  opacity: 0;
  filter: blur(24px);
  transition:
    opacity 500ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.pimg.is-loaded .pimg__full {
  opacity: 1;
  filter: blur(0);
}

.pimg.is-loaded .pimg__placeholder {
  opacity: 0;
}

/* Solo progressive images (e.g. SVG) should never start hidden */
img[data-progressive-image="true"][data-progressive-solo="true"].pimg__full {
  opacity: 1;
  filter: none;
}

.pimg.is-error .pimg__full {
  opacity: 0;
}

.pimg.is-error .pimg__placeholder {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .pimg__placeholder,
  .pimg__full {
    transition: none;
    filter: none;
    transform: none;
  }
}

/* Make existing media layouts aware of .pimg wrappers */
.card__media > .pimg {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

.card__media img,
.card__media .pimg__full,
.card__media .pimg__placeholder {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.card__tag {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  padding: var(--space-600);
}

.tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-block-start: var(--tag-padding-block-start);
  padding-block-end: var(--tag-padding-block-end);
  padding-inline: var(--tag-padding-inline);
  border-radius: var(--tag-radius);
  color: var(--color-text-inverse);
}

.tag::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tag-overlay-bg);
  backdrop-filter: blur(var(--tag-overlay-blur));
  -webkit-backdrop-filter: blur(var(--tag-overlay-blur));
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
}

.tag__text {
  position: relative;
  z-index: 1;
  mix-blend-mode: difference;
}

/* Debug helpers removed: header uses normal blend. */

.hero {
  padding-block: var(--hero-padding-block-start) var(--hero-padding-block-end);
  position: relative;
}

.hero__wrapper {
  position: relative;
  min-block-size: var(--hero-wrapper-height-desktop);
  block-size: auto;
  max-inline-size: var(--hero-wrapper-max-width);
}

.hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: none;
}

.hero__profile {
  position: relative;
  inline-size: var(--hero-profile-size-desktop);
  aspect-ratio: 1 / 1;
  block-size: auto;

  --hero-profile-optical-offset-inline: 80px;

  margin-inline-start: calc(
    4 * (((100% - 11 * var(--space-grid-gap)) / 12) + var(--space-grid-gap)) - var(--hero-profile-optical-offset-inline)
  );
  margin-block-start: 111px;
  overflow: hidden;
}

.hero__profile img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.hero__profile > .pimg {
  inline-size: 100%;
  block-size: 100%;
}

.hero__profile img,
.hero__profile .pimg__full,
.hero__profile .pimg__placeholder {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-grid-gap);
}

.hero__wrapper > .hero__grid:first-of-type {
  position: relative;
  z-index: 1;
}

.hero__wrapper > .hero__grid:last-of-type {
  position: relative;
  margin-block-start: 20px;
  z-index: 1;
}

.hero__headline {
  grid-column: 1 / span 10;
  color: var(--hero-headline-color);
  overflow-wrap: anywhere;
}

.hero[data-hero-debug="headline-2x"] .hero__headline {
  font-size: calc(var(--type-display-xl-size) * 2);
  line-height: calc(var(--type-display-xl-line-height) * 2);
}

.hero__caption {
  grid-column: 1 / span 3;
  color: var(--color-text-primary);
}

.hero__caption a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}

.hero__caption a:focus-visible {
  outline: 2px solid var(--color-text-primary);
  outline-offset: 2px;
}

.case-content figcaption.type-caption a {
  color: inherit;
}

.about-hero {
  --hero-background: var(--hero-background-about);
  --color-hero-glow: var(--color-hero-glow-about);
  --hero-glow-shadow: var(--shadow-hero-glow-about);

  padding-block: 0;
}

.index-hero {
  --hero-background: var(--hero-background-index);
  --color-hero-glow: var(--hero-glow-color-index);
  --hero-glow-shadow: var(--shadow-hero-glow-index);

  padding-block: 0;
}

.about-hero__wrapper {
  position: relative;
  box-sizing: border-box;
  width: 100%;
}

/* About hero — mobile / tablet: full-width yellow, height = width (1:1); desktop overrides below. */
@media (max-width: 1023px) {
  .about-hero {
    /* Yellow + glow fill the whole section; width drives height */
    max-inline-size: none;
    margin-inline: 0;
    width: 100%;
    inline-size: 100%;
    aspect-ratio: 1 / 1;
    min-height: 0;
    min-block-size: 0;
    display: flex;
    flex-direction: column;
    overflow: clip;
    box-sizing: border-box;
  }

  .about-hero__wrapper {
    box-sizing: border-box;
    min-block-size: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    padding-block-start: 0;
    padding-block-end: 0;

    /* Hero copy: always 16px from section edges (overrides .container --space-page-padding on tablet). */
    padding-inline: 16px;
  }

  .about-hero__grid {
    position: relative;
    inline-size: 100%;
    margin-block-end: 48px;
  }

  /* Index hero — same mobile geometry as About (rose surface + copy unchanged) */
  .index-hero {
    max-inline-size: none;
    margin-inline: 0;
    width: 100%;
    inline-size: 100%;
    aspect-ratio: 1 / 1;
    min-height: 0;
    min-block-size: 0;
    display: flex;
    flex-direction: column;
    overflow: clip;
    box-sizing: border-box;
  }

  .index-hero__wrapper {
    box-sizing: border-box;
    min-block-size: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    padding-block-start: 0;
    padding-block-end: 0;
    padding-inline: 16px;
  }

  .index-hero__grid {
    position: relative;
    inline-size: 100%;
    margin-block-end: 48px;
  }
}

.index-hero__wrapper {
  position: relative;
  box-sizing: border-box;
  width: 100%;
}

.index-hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}

.index-hero__headline {
  grid-column: 1 / span 10;
  margin: 0;
  color: var(--color-black);
}

.index-hero__kicker {
  color: var(--color-rose-900);
}

.index-hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.index-table {
  position: relative;
  z-index: var(--layer-after-hero);
  background: var(--color-surface-page);
  --color-hero-glow: var(--color-hero-glow-index);
  --hero-reveal-shadow-background: linear-gradient(
    to top,
    color-mix(in srgb, var(--color-hero-glow) 56%, transparent) 0%,
    color-mix(in srgb, var(--color-hero-glow) 24%, transparent) 44%,
    color-mix(in srgb, var(--color-hero-glow) 0%, transparent) 100%
  );

  padding-block-start: var(--space-2400);
  padding-block-end: var(--space-2400);
}

.index-table::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(-1 * var(--hero-reveal-shadow-block-size));
  block-size: var(--hero-reveal-shadow-block-size);
  background: var(--hero-reveal-shadow-background);
  pointer-events: none;
}

.index-table__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.index-table__item[data-index-divider-start="0"] {
  --index-divider-start: 0;
}

.index-table__item[data-index-divider-start="1"] {
  --index-divider-start: 1;
}

.index-table__line {
  display: block;
  color: inherit;
  text-decoration: none;
}

.index-table__line--row {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.index-table__line--linked {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.index-table__line--linked:hover .index-table__viewcase-label {
  color: var(--color-text-accent-red);
}

.index-table__line--linked:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.index-table__divider-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  inline-size: 100%;
  min-block-size: 0;
}

.index-table__divider-bar {
  margin: 0;
  padding: 0;
  border: 0;
  border-block-start: 1px solid var(--index-table-divider, rgba(0, 0, 0, 0.12));
  min-block-size: 0;
  align-self: stretch;
  box-sizing: border-box;
}

.index-table__divider-bar--from-year {
  grid-column: 1 / span 12;
}

.index-table__divider-bar--from-num {
  grid-column: 2 / span 11;
}

.index-table__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  min-block-size: 30px;
  align-items: start;
  font-variant-numeric: proportional-nums oldstyle-nums;
}

.index-table__grid--head {
  color: rgba(0, 0, 0, 0.5);
}

.index-table__cell {
  overflow-wrap: anywhere;
}

.index-table__cell--year {
  grid-column: 1;
}

.index-table__year--mobile-fill {
  display: none;
}

.index-table__cell--num {
  grid-column: 2;
}

.index-table__cell--name {
  grid-column: 3 / span 3;
}

.index-table__cell--agency {
  grid-column: 6 / span 3;
  text-align: start;
}

.index-table__cell--type {
  grid-column: 9 / span 3;
}

.index-table__cell--viewcase {
  grid-column: 12;
  justify-self: end;
  text-align: end;
  font-style: italic;
  white-space: nowrap;
}

.index-table__viewcase-label {
  text-underline-offset: 0.1em;
}

.index-table__line--head {
  display: block;
}

@media (max-width: 767px) {
  .index-table {
    padding-block-start: var(--space-1600);
    padding-block-end: var(--space-1600);
  }

  .index-table__divider-row {
    display: block;
    inline-size: 100%;
  }

  /* Figma mobile Index line: full-width hairline above each row */
  .index-table__divider-bar {
    grid-column: unset;
    display: block;
    margin-inline-start: 0;
    inline-size: 100%;
    max-inline-size: 100%;
  }

  /* Figma 1795:8882 — Name left (flex), Year right; Body/LG one row */
  .index-table__grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-400);
    min-block-size: 0;
  }

  .index-table__year--mobile-fill {
    display: inline;
  }

  .index-table__grid--head .index-table__cell--num,
  .index-table__grid--head .index-table__cell--agency,
  .index-table__grid--head .index-table__cell--type,
  .index-table__grid--head .index-table__cell--viewcase {
    display: none;
  }

  .index-table__cell--num,
  .index-table__cell--agency,
  .index-table__cell--type,
  .index-table__cell--viewcase {
    display: none !important;
  }

  .index-table__cell--name {
    order: 1;
    flex: 1 1 auto;
    min-inline-size: 0;
    text-align: start;
    padding-inline: 0;
  }

  .index-table__cell--year {
    order: 2;
    flex: 0 0 auto;
    text-align: end;
    white-space: nowrap;
  }

  .index-table__line--linked:hover .index-table__viewcase-label {
    color: inherit;
  }

  .index-table__line--linked:hover .index-table__cell--name {
    text-decoration: underline;
  }
}

.about-hero__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.about-hero__headline {
  grid-column: 1 / -1;
  color: var(--color-orange-900);
  margin: 0;
}

.about-hero__rest {
  color: var(--color-text-primary);
}

@media (min-width: 1024px) {
  .about-hero {
    max-inline-size: none;
    width: auto;
    aspect-ratio: auto;
    display: block;
    overflow: visible;
  }

  .about-hero__wrapper {
    min-block-size: 504px;
    padding-inline: var(--space-page-padding);
    padding-block-start: 0;
  }

  .about-hero__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px;
    inline-size: auto;
    position: absolute;
    inset-inline: var(--space-page-padding);
    inset-block-start: auto;
    inset-block-end: 64px;
  }

  .about-hero__headline {
    grid-column: 1 / span 10;
  }

  .index-hero {
    max-inline-size: none;
    width: auto;
    aspect-ratio: auto;
    display: block;
    overflow: visible;
  }

  .index-hero__wrapper {
    min-block-size: 504px;
    padding-inline: 24px;
  }

  .index-hero__grid {
    position: absolute;
    inset-inline: 24px;
    inset-block-start: auto;
    inset-block-end: 64px;
  }
}

/* Mobile: Experience, then mid column (Hard / Languages / Hardware), then end column (Soft / Links / Courses); 96px gaps per Figma 546:144 / 567:182 */
.about-table__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2400);
  min-width: 0;
}

.about-table__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2400);
  min-width: 0;
}

.about-table {
  --color-hero-glow: var(--color-hero-glow-about);
  --hero-reveal-shadow-background: linear-gradient(
    to top,
    color-mix(in srgb, var(--color-hero-glow) 56%, transparent) 0%,
    color-mix(in srgb, var(--color-hero-glow) 24%, transparent) 44%,
    color-mix(in srgb, var(--color-hero-glow) 0%, transparent) 100%
  );
}

/* About page: not the home #work subheader; 64px vertical padding */
#about-table.section.about-table {
  padding-block: var(--space-1600);
  text-align: start;
  --about-table-rule: color-mix(in srgb, var(--color-black) 40%, transparent);
}

.about-table__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-800);
  min-width: 0;
}

/* Experience list only (about page); 32px between rows per Figma mobile */
.about-table__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-800);
}

.about-table__title {
  margin: 0;
}

.about-table__row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-400);
  padding-block: var(--space-400);
  border-top: 1px solid var(--about-table-rule);
}

.about-table__desc {
  min-width: 0;
}

@media (max-width: 1023px) {
  #about-table.about-table .about-table__block--experience .about-table__list {
    padding-inline-end: var(--space-400);
  }
}

.about-table__divider {
  flex-shrink: 0;
  align-self: stretch;
  inline-size: 100%;
  block-size: 1px;
  min-block-size: 1px;
  background: var(--about-table-rule);
}

.about-table__divider--experience {
  display: none;
}

/* Figma 1775:5199: same hairline as other about-table rules (1px) */
.about-table__divider--section-lead {
  flex-shrink: 0;
  block-size: 1px;
  min-block-size: 1px;
  background: var(--about-table-rule);
}

/* .about-table__section removed: each .about-table__block is a section */

.about-table__subsection {
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
}

.about-table__subsection-title {
  margin: 0;
  font-style: italic;
}

/* Hard skills only: hairline between Best friends / AI / Base (reliable across engines vs 1px ::before) */
.about-table__subsection + .about-table__subsection {
  margin-block-start: var(--space-800);
  padding-block-start: var(--space-400);
  border-block-start: 1px solid var(--about-table-rule);
}

.about-table__items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-table__hardware-media {
  inline-size: 100%;
  aspect-ratio: 670 / 393;
  background: var(--color-black);
  border-radius: var(--radius-sm);
}

.about-table__prose p {
  margin: 0;
}

.about-table__prose p + p {
  margin-block-start: var(--type-body-lg-size);
}

/* Figma 1775:5228: paragraph gap 20px at mobile body 20/30 */
@media (max-width: 767px) {
  #about-table.about-table .about-table__prose.type-body-lg p + p {
    margin-block-start: var(--font-size-20);
  }
}

.about-table a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.about-table__link {
  color: inherit;
}

/* Figma 1775:5199: Hard skills — title → 32px → line → 16px → first block; 32 + hairlines between subsections; pr-48; mobile sub-lines */
@media (max-width: 1023px) {
  #about-table .about-table__block--hard {
    gap: 0;
    padding-inline-end: var(--space-1200);
  }

  #about-table .about-table__block--hard > .about-table__title {
    margin-block-end: var(--space-800);
  }

  #about-table .about-table__block--hard > .about-table__divider {
    margin-block: 0;
    margin-block-end: var(--space-400);
  }

  #about-table .about-table__block--hard > .about-table__divider + .about-table__subsection {
    margin-block-start: 0;
  }

  #about-table .about-table__block--hard .about-table__subsection {
    position: relative;
  }
}

/* Hard skills title/body: use shared .type-* tokens (no page-local type overrides). */

@media (min-width: 1024px) {
  .about-table__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-grid-gap);
    align-items: stretch;
  }

  .about-table__block--experience {
    grid-column: 1 / span 6;
    gap: 0;
  }

  .about-table__col--mid {
    grid-column: 7 / span 3;
  }

  .about-table__col--end {
    grid-column: 10 / span 3;
  }

  .about-table__divider--experience {
    display: block;
    margin-block-start: var(--space-800);
  }

  .about-table__block--experience .about-table__list {
    margin-block-start: var(--space-400);
    gap: var(--space-1200);
  }

  .about-table__row {
    display: grid;
    grid-template-columns: 232px 1fr;
    gap: var(--space-800);
    align-items: start;
    position: relative;
    inline-size: calc(100% - var(--space-1200));
    padding-block: 0;
    border-block-start: 0;
  }

  .about-table__row:not(:first-child) {
    padding-block-start: var(--space-400);
  }

  .about-table__row:not(:first-child)::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    block-size: 1px;
    background: var(--about-table-rule);
  }

  .about-table__block:not(.about-table__block--experience) {
    gap: 0;
  }

  .about-table__block:not(.about-table__block--experience) > .about-table__divider {
    margin-block-start: var(--space-800);
  }

  .about-table__block:not(.about-table__block--experience) > .about-table__divider + * {
    margin-block-start: var(--space-400);
  }

  .about-table__subsection {
    position: relative;
    gap: 0;
  }

  .about-table__block--hard .about-table__subsection > * {
    inline-size: calc(100% - var(--space-1200));
  }

  .about-table__items + .about-table__hardware-media {
    margin-block-start: var(--space-800);
  }
}

.hero__description {
  grid-column: 5 / span 6;
  padding-inline-end: var(--space-400);
}

.hero[data-hero-debug="description-2x"] .hero__description {
  font-size: calc(var(--type-body-lg-size) * 2);
  line-height: calc(var(--type-body-lg-line-height) * 2);
}

@media (min-width: 1920px) {
  .hero__description {
    grid-column: 6 / span 5;
  }

  .hero__profile {
    margin-inline-start: calc(
      5 * (((100% - 11 * var(--space-grid-gap)) / 12) + var(--space-grid-gap)) - var(--hero-profile-optical-offset-inline)
    );
  }
}

@media (min-width: 2560px) {
  .hero__profile {
    /* Uses flow layout on desktop; keep 2560 block empty for future overrides. */
  }
}

.section-title {
  text-align: center;
}

.section-subtitle {
  text-align: center;
  color: var(--color-text-muted);
}

.section-header__content .section-title {
  color: var(--section-accent, var(--color-text-primary));
}

.section-header__content .type-body-lg {
  color: var(--section-text, var(--color-text-primary));
}

.section-header__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-600);
  max-inline-size: var(--section-header-intro-max-width);
  inline-size: 100%;
  min-inline-size: 0;
}

.section-header__intro .prose {
  max-inline-size: none;
}

.section-header__meta {
  color: var(--section-meta, var(--color-text-muted));
}

.section-header__art {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: grid;
  place-items: center;
  opacity: 1;
}

.section-header__art img {
  inline-size: min(1272px, 100%);
  block-size: auto;
}

.section-header__art .pimg__full,
.section-header__art .pimg__placeholder {
  inline-size: min(1272px, 100%);
  block-size: auto;
}

/* Made by Mad — header art (Figma 1282:2643, design width 1512) */
@media (max-width: 1023px) {
  .section--madebymad .section-header__art {
    place-items: center;
  }

  .section--madebymad .section-header__art img {
    position: static;
    inline-size: min(100%, 20rem);
    max-inline-size: 90vw;
    block-size: auto;
    aspect-ratio: 1428 / 1060;
    object-fit: contain;
    object-position: 50% 50%;
  }
}

@media (min-width: 1024px) {
  .section--madebymad .section-header__art {
    display: block;
    z-index: 0;
  }

  .section--madebymad .section-header__content {
    z-index: 1;
  }

  .section--madebymad .section-header__art img {
    position: absolute;

    /* Scale dimensions and offsets with the 1512px-wide design frame (Figma). */
    --madebymad-frame: 1512;

    inline-size: min(1428px, calc(100vw * 1428 / var(--madebymad-frame)));
    max-inline-size: none;
    block-size: auto;
    aspect-ratio: 1428 / 1060;
    object-fit: cover;
    object-position: 50% 50%;
    inset: auto;
    left: 50%;
    top: calc(100vw * 325 / var(--madebymad-frame));
    transform: translateX(-50%);
  }
}

/* In Curves — header art: mobile Figma 1301:5915 (frame 390×852); desktop Figma 1282:2477 / 1512 */
@media (max-width: 1023px) {
  .section--curves .section-header {
    position: relative;
    overflow: clip;
  }

  .section--curves .section-header__art {
    display: block;
    z-index: 0;
    place-items: unset;
  }

  .section--curves .section-header__art img {
    position: absolute;

    /* Same mobile frame as Figma node 1301:5922 (Image): center at (100% + 147.5px, 50% − 189px), 2185×1448 */
    --in-curves-mobile-frame: 390;

    inline-size: min(2185px, calc(100vw * 2185 / var(--in-curves-mobile-frame)));
    max-inline-size: none;
    block-size: auto;
    aspect-ratio: 2185 / 1448;
    object-fit: cover;
    object-position: 50% 50%;
    inset: auto;
    left: calc(100% + 100vw * 147.5 / var(--in-curves-mobile-frame));
    top: calc(50% - 100vw * 189 / var(--in-curves-mobile-frame));
    transform: translate(-50%, -50%);
  }

  /* Figma 1301:5915: gaps 24 / 48 inside copy; no extra block padding (centered in header by parent grid) */
  .section--curves .section-header__content {
    z-index: 1;
    padding-block: 0;
    gap: var(--space-1200);
  }

  .section--curves .section-header__intro {
    gap: var(--space-600);
  }
}

@media (min-width: 1024px) {
  .section--curves .section-header__art {
    display: block;
    z-index: 0;
  }

  .section--curves .section-header__content {
    z-index: 1;
  }

  .section--curves .section-header__art img {
    position: absolute;

    --in-curves-frame: 1512;

    inline-size: min(2185px, calc(100vw * 2185 / var(--in-curves-frame)));
    max-inline-size: none;
    block-size: auto;
    aspect-ratio: 2185 / 1448;
    object-fit: cover;
    inset: auto;
    left: calc(54.17% + 100vw * 10.5 / var(--in-curves-frame));
    top: calc(50% - 100vw * 117.25 / var(--in-curves-frame));
    transform: translate(-50%, -50%);
  }
}

/* Odds & Ends: full-section WebGL background (see #humans-shader) */
.section--odds .section--odds__shader {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  max-width: 100%;
  pointer-events: none;
}

/* Bitmap dimensions from WebGL can imply a huge intrinsic width; cap layout to the section. */
.section--odds .section--odds__shader canvas {
  max-width: 100%;
  width: 100% !important;
  height: 100% !important;
}

.section--odds .section-header {
  z-index: 1;
}

.section--odds .cards-grid {
  position: relative;
  z-index: 1;
}

@supports not (mix-blend-mode: lighten) {
  .footer__model {
    mix-blend-mode: normal;
  }
}

.section-header__content {
  color: var(--section-text, var(--color-text-primary));
  position: relative;
  display: grid;
  gap: var(--space-1200);
  justify-items: center;
  text-align: center;
  padding-block: var(--space-1200);
}

@media (max-width: 1023px) {
  /* Figma 1301:5883 — intro + meta spacing comes from grid gap only, not extra padding around the stack. */
  .section--madebymad .section-header__content {
    padding-block: 0;
  }
}

.cards-grid {
  /* Clip card box-shadows to the grid so they do not paint on the sticky footer (main stacks above footer). */
  contain: paint;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--space-grid-gap);
  row-gap: var(--space-4000);
  padding-inline: var(--space-page-padding);
  padding-block: var(--space-4000);
}

.cards-grid > .card {
  grid-column: 1 / -1;
}

@media (min-width: 1024px) {
  .section--featured .section-header__art img {
    inline-size: 100%;
    max-inline-size: none;
    block-size: auto;
  }

  /* Schrift Collective */
  .cards-grid--schrift .card--top2019 {
    grid-column: 6 / span 5;
    grid-row: 2;
  }

  .cards-grid--schrift .card--schrift-shop {
    grid-column: 4 / span 9;
    grid-row: 5;
  }

  .cards-grid--schrift .card--specimen {
    grid-column: 1 / span 4;
    grid-row: 4;
  }

  .cards-grid--schrift .card--schrift-foundry {
    grid-column: 2 / span 9;
    grid-row: 1;
  }

  .cards-grid--schrift .card--schrift-publishers {
    grid-column: 3 / span 9;
    grid-row: 3;
  }

  /* Made by Mad */
  .cards-grid--mad .card--humans {
    grid-column: 1 / span 9;
    grid-row: 1;
  }

  .cards-grid--mad .card--mybox {
    grid-column: 7 / span 4;
    grid-row: 2;
  }

  .cards-grid--mad .card--madebymad {
    grid-column: 4 / span 9;
    grid-row: 3;
  }

  /* Odds & Ends */
  .cards-grid--odds .card--particle-text {
    grid-column: 1 / span 9;
    grid-row: 4;
  }

  .cards-grid--odds .card--shader {
    grid-column: 3 / span 8;
    grid-row: 3;
  }

  .cards-grid--odds .card--mezhdu-prochim {
    grid-column: 2 / span 9;
    grid-row: 1;
  }

  .cards-grid--odds .card--nostalgia {
    grid-column: 8 / span 5;
    grid-row: 2;
  }

  /* In Curves */
  .cards-grid--curves .card--utochka {
    grid-column: 1 / span 9;
    grid-row: 1;
  }

  .cards-grid--curves .card--mos {
    grid-column: 8 / span 4;
    grid-row: 2;
  }

  .cards-grid--curves .card--roger {
    grid-column: 2 / span 9;
    grid-row: 3;
  }

  .cards-grid--curves .card--untitled {
    grid-column: 4 / span 6;
    grid-row: 4;
  }
}

.cards-grid--odds {
  row-gap: var(--space-2400);
}

.cards-grid--curves {
  padding-block: var(--space-2400);
}

.case-hero {
  --hero-background: var(--color-black);
  --hero-glow-shadow: inset 0 0 24px 0 var(--case-hero-glow);

  padding-block: 0;
  color: var(--color-text-inverse);
  overflow: clip;
}

.case-hero__panel {
  inline-size: 100%;
  max-inline-size: 1920px;
  margin-inline: auto;
}

.case-hero__media-panel {
  block-size: 100vh;
  display: flex;
  flex-direction: column;
  padding-block-start: 84px;
  padding-block-end: var(--space-600);
  padding-inline: var(--space-page-padding);
}

@supports (block-size: 100svh) {
  .case-hero__media-panel {
    block-size: 100svh;
  }
}

@supports (block-size: 100dvh) {
  .case-hero__media-panel {
    block-size: 100dvh;
  }
}

.case-hero__media {
  flex: 1 1 0;
  inline-size: 100%;
  min-block-size: 0;
  margin: 0;
  border-radius: var(--radius-sm);
  background: var(--color-orange-500);
  overflow: hidden;
}

.case-hero__media img,
.case-hero__physics-frame {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.case-hero__media img {
  object-fit: cover;
}

.case-hero__media > .pimg {
  inline-size: 100%;
  block-size: 100%;
}

.case-hero__media img,
.case-hero__media .pimg__full,
.case-hero__media .pimg__placeholder {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.case-hero__physics-frame {
  border: 0;
  background: var(--mezhdu-indigo-950, var(--color-black));
}

.case-hero__text-panel {
  block-size: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-2400);
  padding-block-start: var(--space-1600);
  padding-block-end: var(--space-2400);
  padding-inline: var(--space-page-padding);
}

@supports (block-size: 100svh) {
  .case-hero__text-panel {
    block-size: 100svh;
  }
}

@supports (block-size: 100dvh) {
  .case-hero__text-panel {
    block-size: 100dvh;
  }
}

.case-hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-grid-gap);
  inline-size: 100%;
}

.case-hero__title {
  grid-column: 1 / span 10;
  color: var(--color-text-inverse);
}

.case-hero__title-muted {
  color: var(--case-title-muted);
}

.case-hero__summary {
  grid-column: 5 / span 7;
  color: var(--color-text-inverse);
}

.case-hero__summary p {
  margin: 0;
}

.case-hero__summary p + p {
  margin-block-start: var(--space-800);
}

.case-hero__meta {
  grid-column: 1 / span 3;
  align-self: start;
  color: currentColor;
}

.case-hero__link {
  color: inherit;
  font-style: italic;
  text-decoration-line: underline;
  text-decoration-thickness: 3%;
  text-underline-offset: 0.16em;
  text-decoration-skip-ink: auto;
}

.case-hero__link:hover {
  text-decoration-thickness: 6%;
}

.case-hero__link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

.case-hero--mybox {
  --mybox-orange-50: #fff7ed;
  --mybox-orange-100: #ffedd4;
  --mybox-orange-300: #ffb86a;
  --mybox-orange-500: #ff6900;
  --mybox-orange-800: #9f2d00;
  --mybox-orange-900: #7e2a0c;
  --mybox-orange-950: #441306;
  --case-hero-glow: var(--mybox-orange-300);
  --case-title-muted: var(--mybox-orange-900);

  background: var(--mybox-orange-100);
  color: var(--mybox-orange-800);
  box-shadow: inset 0 0 24px 0 var(--case-hero-glow);
}

.case-hero--mybox .case-hero__media {
  background: var(--mybox-orange-950);
}

.case-hero--mybox .case-hero__media > .pimg {
  align-items: center;
}

.case-hero--mybox .case-hero__media :is(img, .pimg__full, .pimg__placeholder) {
  block-size: auto;
  min-block-size: 100%;
  object-position: 50% 50%;
}

.case-hero--mybox .case-hero__title {
  color: var(--mybox-orange-500);
}

.case-hero--mybox .case-hero__summary {
  color: var(--mybox-orange-800);
}

.case-hero--humans {
  --humans-green: #00693f;
  --humans-yellow: #ffd53d;
  --case-hero-glow: var(--humans-yellow);
  --case-title-muted: var(--color-text-inverse);

  background: var(--humans-green);
  color: var(--color-text-inverse);
  box-shadow: inset 0 0 24px 0 var(--case-hero-glow);
}

.case-hero--humans .case-hero__media {
  background: var(--color-black);
}

.case-hero--humans .case-hero__title {
  color: var(--humans-yellow);
}

.case-hero--humans .case-hero__title-muted {
  color: var(--color-text-inverse);
}

.case-hero--humans .case-hero__summary {
  color: var(--color-text-inverse);
}

.case-hero--mezhdu-prochim {
  --mezhdu-indigo-100: #e0e7ff;
  --mezhdu-indigo-400: #7c86ff;
  --mezhdu-indigo-600: #4f39f6;
  --mezhdu-indigo-950: #1e1a4d;
  --mezhdu-yellow: #ffd900;
  --mezhdu-green: #19a48c;
  --mezhdu-peach: #f4a689;
  --mezhdu-surface-light: #f4f5f7;
  --case-hero-glow: var(--mezhdu-indigo-400);
  --case-title-muted: var(--mezhdu-indigo-950);

  background: var(--mezhdu-indigo-100);
  color: var(--mezhdu-indigo-600);
  box-shadow: inset 0 0 24px 0 var(--case-hero-glow);
}

.case-hero--mezhdu-prochim .case-hero__media {
  background: var(--mezhdu-indigo-950);
}

.case-hero--mezhdu-prochim .case-hero__title,
.case-hero--mezhdu-prochim .case-hero__summary {
  color: var(--mezhdu-indigo-600);
}

.case-hero--mezhdu-prochim .case-hero__title-muted {
  color: var(--mezhdu-indigo-950);
}

.case-hero--utochka {
  --utochka-cream: #fcf9ef;
  --utochka-title-muted: #767676;
  --case-hero-glow: #ff4552;

  background: var(--utochka-cream);
  color: var(--color-black);
  box-shadow: inset 0 0 24px 0 var(--case-hero-glow);
}

.case-hero--utochka .case-hero__media {
  background: var(--color-black);
}

.case-hero--utochka .case-hero__title {
  color: var(--color-black);
}

.case-hero--utochka .case-hero__title-muted {
  color: var(--utochka-title-muted);
}

.case-hero--utochka .case-hero__summary {
  color: var(--color-black);
}

.case-hero--particle-text {
  --particle-text-surface: #edf0f6;
  --particle-text-accent: #1b43ff;
  --case-hero-glow: #1b43ff;

  background: var(--particle-text-surface);
  color: var(--color-black);
  box-shadow: inset 0 0 24px 0 var(--case-hero-glow);
}

.case-hero--particle-text .case-hero__media {
  background: var(--particle-text-accent);
}

.case-hero--particle-text .case-hero__particle-text-frame {
  background: var(--particle-text-accent);
}

.case-hero--particle-text .case-hero__title {
  grid-column: 1 / -1;
  color: var(--color-black);
}

.case-hero--particle-text .case-hero__title-accent {
  color: var(--particle-text-accent);
}

.case-hero--particle-text .case-hero__title-muted {
  color: var(--color-black);
}

.case-hero--particle-text .case-hero__summary {
  grid-column: 5 / span 8;
  color: var(--color-black);
}

.case-hero--particle-text .case-hero__link {
  color: inherit;
}

.case-hero--particle-text + .case-content-shell {
  --case-content-glow: #1b43ff;
}

.particle-text-details {
  min-block-size: 0;
}

.case-hero--mos {
  --mos-title-muted: #767676;
  --case-hero-glow: #99a1af;

  background: #fff;
  color: var(--color-black);
  box-shadow: inset 0 0 24px 0 var(--case-hero-glow);
}

.case-hero--mos .case-hero__media {
  background: var(--color-black);
}

.case-hero--mos .case-hero__title {
  grid-column: 1 / -1;
  color: var(--color-black);
}

.case-hero--mos .case-hero__title-muted {
  color: var(--mos-title-muted);
}

.case-hero--mos .case-hero__summary {
  grid-column: 5 / span 8;
  color: var(--color-black);
}

.case-hero--roger {
  --case-hero-glow: #2f54a0;
  --case-title-muted: var(--color-black);

  background: #fff;
  color: var(--color-black);
  box-shadow: inset 0 0 24px 0 var(--case-hero-glow);
}

.case-hero--roger .case-hero__media {
  background: var(--color-black);
}

.case-hero--roger .case-hero__title,
.case-hero--roger .case-hero__summary {
  color: var(--color-black);
}

.roger-title__accent {
  color: #a02b2b;
}

.roger-hero-media {
  position: relative;
}

.media-ph {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  background: var(--color-black);
  border-radius: var(--radius-sm);
}

.media-ph--cover {
  border-radius: inherit;
}

.roger-ph {
  aspect-ratio: var(--ph-ratio, 16 / 9);
}

.roger-ph--hero {
  --ph-ratio: 1512 / 911;

  background: url("/assets/figma/roger/hero.jpg") center / cover no-repeat;
}

.roger-ph--ratio-2880x1800 {
  --ph-ratio: 2880 / 1800;
}

.roger-ph--ratio-5184x3456 {
  --ph-ratio: 5184 / 3456;
}

.roger-ph--ratio-2048x1365 {
  --ph-ratio: 2048 / 1365;
}

.roger-ph--ratio-4096x2731 {
  --ph-ratio: 4096 / 2731;
}

.roger-ph--ratio-2731x4096 {
  --ph-ratio: 2731 / 4096;
}

.roger-ph--ratio-3840x2160 {
  --ph-ratio: 3840 / 2160;
}

.roger-ph--ratio-2928x1647 {
  --ph-ratio: 2928 / 1647;
}

.roger-media-grid .media-ph {
  position: relative;
  overflow: hidden;
  overflow: clip;
}

.roger-media-grid .media-ph > .pimg {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

.roger-media-grid .media-ph :is(.pimg__placeholder, .pimg__full) {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  border-radius: inherit;
}

.roger-bulletin {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
  inline-size: 100%;
  overflow: hidden;
  overflow: clip;
  border-radius: var(--radius-sm);
}

.roger-bulletin__frame {
  inline-size: 100%;
  background: var(--color-black);
  padding-inline: var(--space-1600);
  padding-block: var(--space-600);
  border-radius: inherit;
  overflow: hidden;
  overflow: clip;
}

.roger-bulletin__media {
  aspect-ratio: 2928 / 1647;
  inline-size: 100%;
}

.roger-bulletin__media > .pimg {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
}

.roger-bulletin__media .pimg__picture,
.roger-bulletin__media .pimg > .pimg__full,
.roger-bulletin__media .pimg__placeholder {
  inline-size: 100%;
  block-size: 100%;
}

.roger-bulletin__media :is(.pimg__placeholder, .pimg__full) {
  object-fit: contain;
  border-radius: inherit;
}

.roger-media-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-800);
  margin: 0;
  padding: 0;
}

.roger-media {
  margin: 0;
}

.roger-media__caption {
  color: var(--color-text-muted);
  margin-block-start: var(--space-300);
}

@media (min-width: 768px) {
  .roger-media-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 32px;
  }

  .roger-media--01,
  .roger-media--06,
  .roger-media--15,
  .roger-media--18,
  .roger-media--19 {
    grid-column: 1 / -1;
  }

  .roger-media--02,
  .roger-media--04,
  .roger-media--07,
  .roger-media--09,
  .roger-media--11,
  .roger-media--13,
  .roger-media--16 {
    grid-column: 1 / span 6;
  }

  .roger-media--03,
  .roger-media--05,
  .roger-media--08,
  .roger-media--10,
  .roger-media--12,
  .roger-media--14,
  .roger-media--17 {
    grid-column: 7 / span 6;
  }
}

.case-hero--schrift-shop {
  --schrift-shop-muted: #767676;
  --case-hero-glow: var(--color-surface-featured-raw);

  background: #fff;
  color: var(--color-black);
  box-shadow: inset 0 0 24px 0 var(--case-hero-glow);
}

.case-hero--schrift-shop .case-hero__media {
  background: var(--color-black);
}

.case-hero--schrift-shop .case-hero__title {
  grid-column: 1 / -1;
  color: var(--color-black);
}

.case-hero--schrift-shop .case-hero__title-muted {
  color: var(--schrift-shop-muted);
}

.case-hero--schrift-shop .case-hero__summary {
  grid-column: 5 / span 8;
  color: var(--color-black);
}

.case-hero--made-by-mad {
  --made-by-mad-surface: #fcf9ef;
  --made-by-mad-glow: #e1dabe;

  --case-hero-glow: var(--made-by-mad-glow);
  --case-title-muted: var(--color-black);

  background: var(--made-by-mad-surface);
  color: var(--color-black);
  box-shadow: inset 0 0 24px 0 var(--case-hero-glow);
}

.case-hero--made-by-mad .case-hero__media {
  background: var(--color-black);
}

.case-hero--made-by-mad .case-hero__title,
.case-hero--made-by-mad .case-hero__summary {
  color: var(--color-black);
}

.made-by-mad-title__accent {
  color: #454add;
}

.made-by-mad-hero-media {
  aspect-ratio: 1464 / 803;
}

.made-by-mad-media-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-grid-gap);
  row-gap: var(--space-800);
  inline-size: 100%;
  overflow: clip;
}

.made-by-mad-media {
  margin: 0;
  min-inline-size: 0;
}

.made-by-mad-ph {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
  background-color: var(--color-black);
  border-radius: var(--radius-sm);
  overflow: clip;
}

.made-by-mad-ph > .pimg {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
}

.made-by-mad-ph--hero {
  aspect-ratio: 1464 / 803;
  border-radius: var(--radius-sm);
  --made-by-mad-fit: cover;
}

.made-by-mad-ph :is(.pimg__full, .pimg__placeholder) {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: var(--made-by-mad-fit, contain);
  object-position: var(--made-by-mad-position, center);
}

.made-by-mad-ph--wide-1464-915 {
  aspect-ratio: 1464 / 915;
}

.made-by-mad-ph--1464-976 {
  aspect-ratio: 1464 / 976;
  --made-by-mad-fit: cover;
}

.made-by-mad-ph--480-625 {
  aspect-ratio: 480 / 625;
}

.made-by-mad-ph--480-887 {
  aspect-ratio: 480 / 887;
}

.made-by-mad-ph--480-434 {
  aspect-ratio: 480 / 434;
}

.made-by-mad-ph--931-1334 {
  aspect-ratio: 931 / 1334;
}

.made-by-mad-ph--393-774 {
  aspect-ratio: 393 / 774;
}

.made-by-mad-ph--phone {
  border-radius: 40px;
  --made-by-mad-fit: cover;
}

.made-by-mad-media--01 {
  grid-column: 1 / -1;
}

.made-by-mad-media--02 {
  grid-column: 1 / span 4;
}

.made-by-mad-media--03 {
  grid-column: 5 / span 4;
}

.made-by-mad-media--04 {
  grid-column: 9 / span 4;
}

.made-by-mad-media--02 .made-by-mad-ph,
.made-by-mad-media--03 .made-by-mad-ph,
.made-by-mad-media--04 .made-by-mad-ph {
  background-color: transparent;
  --made-by-mad-position: top center;
}

.made-by-mad-media--05 {
  grid-column: 1 / -1;
}

.made-by-mad-media-duo {
  display: flex;
  gap: var(--space-grid-gap);
  padding: var(--space-1600) var(--space-600);
  overflow: clip;
  border-radius: var(--radius-sm);
  background: var(--color-black);
  align-items: flex-start;
}

.made-by-mad-media-duo .made-by-mad-ph {
  background-color: #141414;
}

.made-by-mad-media-duo .made-by-mad-ph--931-1334 {
  flex: 1 1 0;
}

.made-by-mad-media-duo .made-by-mad-ph--393-774 {
  flex: 0 0 min(393px, 34%);
}

.made-by-mad-media--06 {
  grid-column: 1 / -1;
}

.made-by-mad-media--07 {
  grid-column: 1 / -1;
}

.case-hero--top-2019 {
  --tj-black: #020202;
  --tj-orange: #ff5c00;
  --case-hero-glow: #ffdf20;
  --stage-width: 1024px;
  --stage-height: 672px;
  --strip-x: 362px;
  --strip-width: 300px;
  --strip-start-y: 148px;
  --strip-end-y: -3415px;
  --hero-total-duration: 2535ms;
  --hero-roll-delay: 1150ms;
  --hero-roll-duration: 1385ms;
  --hero-appear-duration: 940ms;

  background: var(--tj-orange);
  color: var(--color-black);
  box-shadow: inset 0 0 24px 0 var(--case-hero-glow);
}

.case-hero--top-2019 .case-hero__media {
  display: flex;
  flex-direction: column;
  min-block-size: 0;
  padding: 0;
  background: var(--tj-black);
}

.case-hero--top-2019 .case-hero__title {
  grid-column: 1 / -1;
  color: var(--color-black);
}

.case-hero--top-2019 .case-hero__title-muted {
  color: #fff;
}

.case-hero--top-2019 .case-hero__summary {
  grid-column: 5 / span 8;
  color: var(--color-black);
}

.case-hero--top-2019 .top2019-hero {
  --stage-scale: 1;

  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  inline-size: 100%;
  min-block-size: 0;
  overflow: hidden;
}

.case-hero--top-2019 .top2019-stage {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: var(--stage-width);
  block-size: var(--stage-height);
  overflow: visible;
  transform: translate(-50%, -50%) scale(var(--stage-scale));
  transform-origin: center;
}

.case-hero--top-2019 .top2019-strip {
  position: absolute;
  inset-inline-start: var(--strip-x);
  inset-block-start: 0;
  z-index: 1;
  inline-size: var(--strip-width);
  block-size: auto;
  max-inline-size: none;
  opacity: 0;
  filter: blur(22px);
  transform: translate3d(0, var(--strip-start-y), 0);
  will-change: transform;
  user-select: none;
  pointer-events: none;
}

.case-hero--top-2019 .top2019-hero.is-ready .top2019-strip {
  animation:
    top2019-strip-appear var(--hero-appear-duration) cubic-bezier(0.16, 1, 0.3, 1) forwards,
    top2019-strip-roll var(--hero-roll-duration) cubic-bezier(0.88, 0, 0.12, 1) var(--hero-roll-delay) forwards;
}

.case-hero--top-2019 .top2019-logo {
  position: absolute;
  inset-inline-start: max(28px, calc((100% - (var(--stage-width) * var(--stage-scale))) / 2 + 28px * var(--stage-scale)));
  inset-block-start: max(29px, calc((100% - (var(--stage-height) * var(--stage-scale))) / 2 + 29px * var(--stage-scale)));
  z-index: 2;
  inline-size: clamp(36px, calc(36px * var(--stage-scale)), 108px);
  aspect-ratio: 1;
  color: var(--tj-orange);
  opacity: 0;
  filter: blur(10px);
  will-change: opacity, filter;
}

.case-hero--top-2019 .top2019-hero.is-ready .top2019-logo {
  animation: top2019-logo-light var(--hero-total-duration) forwards;
}

.case-hero--top-2019 .top2019-logo img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.case-hero--top-2019 .case-hero__media img.top2019-strip {
  object-fit: fill;
  block-size: auto;
  inline-size: var(--strip-width);
}

.case-text-block--lead-span-8 .case-lead-prose {
  grid-column: 5 / span 8;
  max-inline-size: none;
}

@keyframes top2019-strip-appear {
  0% {
    opacity: 0;
    filter: blur(22px);
  }

  42% {
    opacity: 0.28;
    filter: blur(18px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes top2019-strip-roll {
  0% {
    transform: translate3d(0, var(--strip-start-y), 0);
  }

  100% {
    transform: translate3d(0, var(--strip-end-y), 0);
  }
}

@keyframes top2019-logo-light {
  0% {
    opacity: 0;
    filter: blur(10px);
  }

  24% {
    opacity: 0.34;
    filter: blur(0);
  }

  58% {
    opacity: 0.34;
    filter: blur(0);
  }

  72% {
    opacity: 0.58;
  }

  100% {
    opacity: 1;
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-hero--top-2019 .top2019-strip,
  .case-hero--top-2019 .top2019-logo {
    animation: none;
  }

  .case-hero--top-2019 .top2019-strip {
    transform: translate3d(0, var(--strip-end-y), 0);
    opacity: 1;
    filter: none;
  }

  .case-hero--top-2019 .top2019-logo {
    opacity: 1;
    filter: none;
  }
}

.case-hero--top-2019 [data-top2019-hero][data-reduced-motion="true"] .top2019-strip,
.case-hero--top-2019 [data-top2019-hero][data-reduced-motion="true"] .top2019-logo {
  animation: none;
}

.case-hero--top-2019 [data-top2019-hero][data-reduced-motion="true"] .top2019-strip {
  transform: translate3d(0, var(--strip-end-y), 0);
  opacity: 1;
  filter: none;
}

.case-hero--top-2019 [data-top2019-hero][data-reduced-motion="true"] .top2019-logo {
  opacity: 1;
  filter: none;
}

.top2019-media-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-grid-gap);
  row-gap: var(--space-800);
  inline-size: 100%;
}

.top2019-media {
  margin: 0;
  overflow: clip;
  border-radius: var(--radius-sm);
}

.top2019-media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.top2019-media--01 {
  grid-column: 1 / -1;
  aspect-ratio: 1440 / 1261;
}

.top2019-media--02 {
  grid-column: 1 / -1;
  aspect-ratio: 1440 / 742;
}

.top2019-media--03 {
  grid-column: 1 / -1;
  aspect-ratio: 1440 / 964;
}

.top2019-media--04 {
  grid-column: 1 / -1;
  aspect-ratio: 1440 / 1303;
}

.top2019-media--05 {
  grid-column: 1 / -1;
  aspect-ratio: 1440 / 1221;
}

.top2019-media--06 {
  grid-column: 1 / -1;
  aspect-ratio: 1440 / 912;
}

.top2019-media--07 {
  grid-column: 1 / -1;
  aspect-ratio: 1440 / 1084;
}

.top2019-media--08 {
  grid-column: 1 / -1;
  aspect-ratio: 1440 / 1702;
}

.top2019-media--09 {
  grid-column: 1 / -1;
  aspect-ratio: 1440 / 1562;
}

.top2019-media--10 {
  grid-column: 1 / -1;
  aspect-ratio: 1440 / 1087;
}

.top2019-media--11 {
  grid-column: 1 / -1;
  aspect-ratio: 1440 / 1514;
}

.top2019-media--12 {
  grid-column: 1 / -1;
  aspect-ratio: 1440 / 934;
}

.top2019-media--13 {
  grid-column: 1 / -1;
  aspect-ratio: 1440 / 1593;
}

.top2019-media--14 {
  grid-column: 1 / -1;
  aspect-ratio: 1440 / 973;
}

.case-content-shell {
  --case-content-glow: #505050;

  /* Matches the visual falloff of the case hero's native inset 0 0 24px shadow. */
  --case-content-reveal-shadow-background: linear-gradient(
    to top,
    color-mix(in srgb, var(--case-content-glow) 47%, transparent) 0%,
    color-mix(in srgb, var(--case-content-glow) 36%, transparent) 17%,
    color-mix(in srgb, var(--case-content-glow) 24%, transparent) 35%,
    color-mix(in srgb, var(--case-content-glow) 15%, transparent) 52%,
    color-mix(in srgb, var(--case-content-glow) 8%, transparent) 70%,
    color-mix(in srgb, var(--case-content-glow) 4%, transparent) 87%,
    color-mix(in srgb, var(--case-content-glow) 0%, transparent) 100%
  );

  position: relative;
  z-index: var(--layer-after-hero);
  background: var(--color-surface-page);
  padding: var(--space-2400) var(--space-page-padding);
}

.case-content-shell::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(-1 * var(--hero-reveal-shadow-block-size));
  block-size: var(--hero-reveal-shadow-block-size);
  background: var(--case-content-reveal-shadow-background);
  pointer-events: none;
}

.case-hero--mybox + .case-content-shell {
  --case-content-glow: #ffb86a;
}

.case-hero--humans + .case-content-shell {
  --case-content-glow: #ffd53d;
}

.case-hero--mezhdu-prochim + .case-content-shell {
  --case-content-glow: #7c86ff;
}

.case-hero--utochka + .case-content-shell {
  --case-content-glow: #ff4552;
}

.case-hero--mos + .case-content-shell {
  --case-content-glow: #99a1af;
}

.case-hero--roger + .case-content-shell {
  --case-content-glow: #2f54a0;
}

.case-hero--schrift-shop + .case-content-shell {
  /* Figma Dev — reveal: 0 0 24px #f2f4f7; gradient uses same base as hero inset */
  --case-content-glow: var(--color-surface-featured-raw);
}

.case-hero--made-by-mad + .case-content-shell {
  --case-content-glow: #e1dabe;
}

.case-hero--top-2019 + .case-content-shell {
  --case-content-glow: #ffdf20;
}

.case-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2400);
  inline-size: 100%;
  max-inline-size: 1920px;
  margin-inline: auto;
}

.case-text-block {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-grid-gap);
  row-gap: 18px;
  inline-size: 100%;
}

.case-note {
  grid-column: 1 / span 3;
  margin: 0;
  color: var(--color-text-muted);
}

.case-note__link {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 5%;
  text-underline-offset: 0.16em;
  text-decoration-skip-ink: auto;
}

.case-note__link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.case-prose {
  grid-column: 5 / span 6;
}

.case-prose p {
  margin: 0;
}

.case-prose p + p {
  margin-block-start: var(--type-body-lg-size);
}

.case-media-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-grid-gap);
  row-gap: var(--space-800);
  inline-size: 100%;
}

.case-media-grid__feature,
.case-media-grid__panel {
  margin: 0;
}

.case-media-grid__feature {
  grid-column: 1 / -1;
}

.case-media-grid__video-frame {
  aspect-ratio: 1464 / 1038;
  inline-size: 100%;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-orange-500);
}

.case-media-grid__video,
.case-media-grid__panel img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.case-media-grid__video {
  object-fit: cover;
}

.case-media-grid__caption {
  margin-block-start: var(--space-300);
  color: var(--color-text-muted);
}

.case-media-grid__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-black);
}

.case-media-grid__panel img {
  max-inline-size: none;
  object-fit: cover;
}

.case-media-grid__panel--unit {
  grid-column: 1 / span 4;
  aspect-ratio: 480 / 981;
  padding: var(--space-600);
}

.case-media-grid__panel--unit img {
  aspect-ratio: 275 / 594;
  border-radius: var(--radius-400);
}

.case-media-grid__panel--formulating {
  grid-column: 5 / span 8;
  align-self: start;
  align-items: flex-start;
  justify-content: center;
  padding-block-start: 24px;
  padding-inline: max(24px, var(--space-page-padding));
  padding-block-end: 0;
}

.case-media-grid__panel--formulating img {
  object-fit: contain;
  inline-size: auto;
  max-inline-size: 100%;
  block-size: auto;
  border-start-start-radius: var(--radius-400);
  border-start-end-radius: var(--radius-400);
  border-end-end-radius: 0;
  border-end-start-radius: 0;
}

.case-media-grid__panel--retros {
  grid-column: 1 / -1;
  align-items: flex-start;
  padding-block: 24px 0;
  padding-inline: var(--space-1200);
}

.case-media-grid__panel--retros img {
  inline-size: min(100%, 894px);
  block-size: auto;
  border-start-start-radius: var(--radius-400);
  border-start-end-radius: var(--radius-400);
  border-end-end-radius: 0;
  border-end-start-radius: 0;
}

.case-reference-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-800);
  inline-size: 100%;
}

.case-reference-illustration {
  margin: 0;
  inline-size: 100%;
  aspect-ratio: 1464 / 1038;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-orange-500);
}

.case-reference-illustration img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.case-reference-illustration > .pimg {
  inline-size: 100%;
  block-size: 100%;
}

.case-reference-illustration .pimg__full,
.case-reference-illustration .pimg__placeholder {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.case-reference-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-grid-gap);
  inline-size: 100%;
  padding: var(--space-600) var(--space-600) 0;
  overflow: clip;
  border-radius: var(--radius-sm);
  background: var(--color-black);
}

.case-reference-poster {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-grid-gap);
  row-gap: var(--space-300);
  margin: 0;
}

.case-reference-item {
  margin: 0;
  overflow: hidden;
}

.case-reference-item img,
.case-reference-poster__frame img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.case-reference-item > .pimg,
.case-reference-poster__frame > .pimg {
  inline-size: 100%;
  block-size: 100%;
}

.case-reference-item .pimg__full,
.case-reference-item .pimg__placeholder,
.case-reference-poster__frame .pimg__full,
.case-reference-poster__frame .pimg__placeholder {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.case-reference-item img {
  border-radius: inherit;
}

.case-reference-item--glyphs {
  grid-column: 1 / span 5;
  aspect-ratio: 1158 / 1364;
  border-radius: var(--radius-400);
}

.case-reference-item--specimen {
  grid-column: 6 / span 7;
  border-start-start-radius: var(--radius-400);
  border-start-end-radius: var(--radius-400);
  border-end-end-radius: 0;
  border-end-start-radius: 0;
}

.case-reference-item--specimen img {
  block-size: auto;
  object-fit: contain;
}

.case-reference-poster__frame {
  grid-column: 2 / span 10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--space-4000);
  border-radius: var(--radius-sm);
  background: var(--color-black);
}

.case-reference-poster__frame img {
  aspect-ratio: 537 / 742;
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--radius-sm);
}

.case-reference-poster__frame > .pimg {
  block-size: auto;
}

.case-reference-poster__frame .pimg__full,
.case-reference-poster__frame .pimg__placeholder {
  aspect-ratio: 537 / 742;
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--radius-sm);
}

.case-reference-poster__caption {
  grid-column: 2 / span 10;
  margin-block-start: 0;
  color: var(--color-text-muted);
}

.case-reference-item--article {
  grid-column: 1 / span 6;
  align-self: start;
  aspect-ratio: 1440 / 2741;
  border-radius: var(--radius-400);
}

.case-reference-item--article img {
  block-size: auto;
  object-fit: contain;
}

.case-reference-item--score {
  grid-column: 7 / span 6;
  aspect-ratio: 1404 / 3123;
  border-start-start-radius: var(--radius-400);
  border-start-end-radius: var(--radius-400);
  border-end-end-radius: 0;
  border-end-start-radius: 0;
}

.case-editorial-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-800);
  inline-size: 100%;
}

.case-editorial-gallery__canvas {
  position: relative;
  aspect-ratio: 1464 / 4356;
  inline-size: 100%;
  overflow: clip;
  border-radius: var(--radius-sm);
  background: var(--color-black);
}

.case-editorial-gallery__item,
.case-editorial-gallery__detail {
  margin: 0;
}

.case-editorial-gallery__item {
  position: absolute;
  inline-size: 41.325%;
  aspect-ratio: 595 / 842;
  overflow: hidden;
}

.case-editorial-gallery__item img,
.case-editorial-gallery__detail img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.case-editorial-gallery__item--01 {
  inset-block-start: 0.551%;
  inset-inline-start: 29.305%;
}

.case-editorial-gallery__item--02 {
  inset-block-start: 23.003%;
  inset-inline-start: 29.305%;
}

.case-editorial-gallery__item--03 {
  inset-block-start: 45.456%;
  inset-inline-start: 29.305%;
}

.case-editorial-gallery__item--04 {
  inset-block-start: 10.377%;
  inset-inline-start: 74.792%;
}

.case-editorial-gallery__item--05 {
  inset-block-start: 10.377%;
  inset-inline-start: -16.18%;
}

.case-editorial-gallery__item--06 {
  inset-block-start: 32.829%;
  inset-inline-start: 74.792%;
}

.case-editorial-gallery__item--07 {
  inset-block-start: 32.829%;
  inset-inline-start: -16.18%;
}

.case-editorial-gallery__item--08 {
  inset-block-start: 55.281%;
  inset-inline-start: 74.792%;
}

.case-editorial-gallery__item--09 {
  inset-block-start: 55.281%;
  inset-inline-start: -16.18%;
}

.case-editorial-gallery__item--10 {
  inset-block-start: 67.909%;
  inset-inline-start: 29.305%;
}

.case-editorial-gallery__item--11 {
  inset-block-start: 90.361%;
  inset-inline-start: 29.305%;
}

.case-editorial-gallery__item--12 {
  inset-block-start: 77.734%;
  inset-inline-start: 74.792%;
}

.case-editorial-gallery__item--13 {
  inset-block-start: 77.734%;
  inset-inline-start: -16.18%;
}

.case-editorial-gallery__detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-grid-gap);
  padding: var(--space-600);
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-black);
}

.case-editorial-gallery__detail {
  aspect-ratio: 1;
  overflow: hidden;
}

.case-lead-prose {
  grid-column: 5 / span 7;
  max-inline-size: 1087px;
}

.case-lead-prose p {
  margin: 0;
}

.case-lead-prose p + p {
  margin-block-start: var(--type-heading-lg-size);
}

.case-details {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-grid-gap);
  row-gap: var(--space-800);
  min-block-size: 610px;
  overflow: visible;
  border-radius: var(--radius-sm);
}

.case-details__art {
  position: absolute;
  inset-block-start: -80px;
  inset-inline-start: -22px;
  z-index: 0;
  inline-size: min(35.1vw, 514px);
  transform: rotate(180deg);
  transform-origin: center;
  pointer-events: none;
}

.case-details__art img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  mix-blend-mode: multiply;
}

.case-details__section {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-800);
  min-inline-size: 0;
}

.case-details__section--details {
  grid-column: 5 / span 4;
}

.case-details__section--team {
  grid-column: 9 / span 4;
}

.case-details__heading {
  margin: 0;
}

.case-details__item {
  border-block-start: 1px solid rgba(0, 0, 0, 0.14);
  padding-block-start: var(--space-400);
  padding-inline-end: var(--space-1200);
  color: var(--color-text-primary);
  font-family: var(--font-family-serif);
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-line-height);
  letter-spacing: var(--type-body-lg-tracking);
}

.case-details__item p {
  margin: 0;
}

.case-details__item em {
  font-style: italic;
}

.case-details__link {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 2%;
  text-underline-offset: 0.25em;
  text-decoration-skip-ink: auto;
}

.case-details__link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.mezhdu-media-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-grid-gap);
  row-gap: var(--space-800);
  inline-size: 100%;
  overflow: clip;
}

.mezhdu-media,
.mezhdu-social-item,
.mezhdu-collage__media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.mezhdu-media img,
.mezhdu-social-item img,
.mezhdu-collage__media:not(.mezhdu-collage-composition) > img,
.mezhdu-details__art img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.mezhdu-media--laptop {
  grid-column: 1 / -1;
  aspect-ratio: 1464 / 976;
}

/* Figma 2076:13061 «Grid» — wide course covers */
.mezhdu-media--mestovkotorom,
.mezhdu-media--etoya {
  grid-column: 1 / -1;
  justify-self: stretch;
  inline-size: 100%;
  min-inline-size: 0;
  aspect-ratio: 1440 / 820;
}

/* Row 3 left: Figma Grid 2076:13061 — 2+4+4+2 columns; aspect 375/648 */
.mezhdu-media--rukinozhnicy {
  grid-column: 3 / span 4;
  justify-self: stretch;
  inline-size: 100%;
  min-inline-size: 0;
  aspect-ratio: 375 / 648;
}

/* Row 3 right: same row, stretch to match left */
.mezhdu-media--ai-ai-ai {
  grid-column: 7 / span 4;
  align-self: stretch;
  min-block-size: 0;
  min-inline-size: 0;
}

.mezhdu-social-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-grid-gap);
  inline-size: 100%;
  align-items: start;
}

.mezhdu-social-item {
  aspect-ratio: 1;
  background: var(--color-surface-featured);
}

.mezhdu-social-item--tall {
  aspect-ratio: 480 / 853;
}

.mezhdu-collage {
  inline-size: 100%;
}

.mezhdu-collage__media {
  display: flex;
  justify-content: center;
  inline-size: 100%;
  aspect-ratio: 1464 / 4258;
  background: #f4f5f7;
}

.mezhdu-collage__media:not(.mezhdu-collage-composition) > img {
  inline-size: auto;
  max-inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.mezhdu-collage-composition {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.mezhdu-collage-composition__item {
  /* rotate(0deg) composes with scroll-reveal scale(); `none` cannot be chained with scale() */
  --mezhdu-item-transform: rotate(0deg);

  position: absolute;
  display: block;
  max-inline-size: none;
  transform: var(--mezhdu-item-transform);
  transform-origin: center;
}

/* Figma frame 2090:14640 «sad 1» 1464×4258 — layer order back → front, z-index for stacking */
.mezhdu-collage-composition__item--memory-01 {
  z-index: 1;
  inset-block-start: 12.7343%;
  inset-inline-start: -0.1366%;
  inline-size: 38.6623%;
  block-size: 13.7979%;
}

.mezhdu-collage-composition__item--memory-02 {
  z-index: 2;
  inset-block-start: 26.4492%;
  inset-inline-start: 56.2158%;
  inline-size: 31.3279%;
  block-size: 14.7455%;
}

.mezhdu-collage-composition__item--memory-03 {
  z-index: 3;
  inset-block-start: 19.9389%;
  inset-inline-start: 31.4208%;
  inline-size: 30.1913%;
  block-size: 13.8103%;
}

.mezhdu-collage-composition__item--memory-04 {
  z-index: 4;
  inset-block-start: 29.2626%;
  inset-inline-start: 4.0984%;
  inline-size: 31.9716%;
  block-size: 15.0196%;
}

.mezhdu-collage-composition__item--memory-05 {
  z-index: 5;
  inset-block-start: 36.0498%;
  inset-inline-start: 65.7104%;
  inline-size: 34.2896%;
  block-size: 14.9118%;
}

.mezhdu-collage-composition__item--memory-06 {
  z-index: 6;
  inset-block-start: 35.6271%;
  inset-inline-start: 20.0906%;
  inline-size: 60.3728%;
  block-size: 21.0962%;
}

.mezhdu-collage-composition__item--memory-07 {
  z-index: 7;
  inset-block-start: 69.3283%;
  inset-inline-start: 4.5082%;
  inline-size: 38.1148%;
  block-size: 17.2147%;
}

.mezhdu-collage-composition__item--memory-08 {
  z-index: 8;
  inset-block-start: 81.7755%;
  inset-inline-start: 8.3333%;
  inline-size: 57.2404%;
  block-size: 15.7445%;
}

.mezhdu-collage-composition__item--memory-09 {
  z-index: 9;
  inset-block-start: 96.3547%;
  inset-inline-start: 9.5766%;
  inline-size: 7.9111%;
  block-size: 2.5313%;
}

.mezhdu-collage-composition__item--memory-10 {
  z-index: 10;
  inset-block-start: 44.7863%;
  inset-inline-start: -6.4208%;
  inline-size: 33.0601%;
  block-size: 12.3532%;
}

.mezhdu-collage-composition__item--memory-11 {
  z-index: 11;
  inset-block-start: 53.0296%;
  inset-inline-start: 47.7459%;
  inline-size: 37.5%;
  block-size: 19.0695%;
}

.mezhdu-collage-composition__item--memory-12 {
  z-index: 12;
  inset-block-start: 48.8962%;
  inset-inline-start: 72.7459%;
  inline-size: 30.5328%;
  block-size: 9.9577%;
}

.mezhdu-collage-composition__item--memory-13 {
  z-index: 13;
  inset-block-start: 58.3372%;
  inset-inline-start: 3.1421%;
  inline-size: 50.8801%;
  block-size: 12.4472%;
}

.mezhdu-collage-composition__item--memory-14 {
  z-index: 14;
  inset-block-start: 69.3283%;
  inset-inline-start: 51.2295%;
  inline-size: 55.24%;
  block-size: 14.7722%;
}

.mezhdu-collage-composition__item--memory-15 {
  z-index: 15;
  inset-block-start: 15.2184%;
  inset-inline-start: 59.4065%;
  inline-size: 20.3934%;
  block-size: 6.2814%;
}

.mezhdu-collage-composition__item--memory-16 {
  z-index: 16;
  inset-block-start: -1.1508%;
  inset-inline-start: 18.7842%;
  inline-size: 49.6868%;
  block-size: 17.1203%;
}

.mezhdu-collage-composition__item--memory-17 {
  z-index: 17;
  inset-block-start: 7.0925%;
  inset-inline-start: 56.7623%;
  inline-size: 45.3552%;
  block-size: 16.2283%;
}

.mezhdu-collage-composition__item--memory-18 {
  z-index: 18;
  inset-block-start: 17.0033%;
  inset-inline-start: 82.8348%;
  inline-size: 37.1102%;
  block-size: 14.4993%;
}

.mezhdu-collage-composition__item--memory-19 {
  z-index: 19;
  inset-block-start: 0.7985%;
  inset-inline-start: 77.7609%;
  inline-size: 22.3388%;
  block-size: 6.3015%;
}

.mezhdu-collage-composition__item--memory-20 {
  z-index: 20;
  inset-block-start: 10.9444%;
  inset-inline-start: -2.3224%;
  inline-size: 12.8185%;
  block-size: 3.8313%;
}

.mezhdu-collage-composition__item--memory-21 {
  z-index: 21;
  inset-block-start: 35.4861%;
  inset-inline-start: 92.4083%;
  inline-size: 7.3539%;
  block-size: 2.4508%;
}

.mezhdu-collage-composition__item--memory-22 {
  z-index: 22;
  inset-block-start: 36.7778%;
  inset-inline-start: 35.5191%;
  inline-size: 8.1284%;
  block-size: 2.5129%;
}

.mezhdu-collage-composition__item--memory-23 {
  z-index: 23;
  inset-block-start: 56.4133%;
  inset-inline-start: 32.9766%;
  inline-size: 11.8246%;
  block-size: 3.6738%;
}

.mezhdu-collage-composition__item--memory-24 {
  z-index: 24;
  inset-block-start: 28.3204%;
  inset-inline-start: -2.8005%;
  inline-size: 13.7401%;
  block-size: 4.6364%;
}

.mezhdu-collage-composition__item--memory-25 {
  z-index: 25;
  inset-block-start: 63.176%;
  inset-inline-start: 80.9089%;
  inline-size: 12.5277%;
  block-size: 4.253%;
}

.mezhdu-collage-composition__item--memory-26 {
  z-index: 26;
  inset-block-start: 86.1672%;
  inset-inline-start: 73.1557%;
  inline-size: 27.9373%;
  block-size: 11.9627%;
}

.mezhdu-collage-composition__item--memory-27 {
  z-index: 27;
  inset-block-start: 77.948%;
  inset-inline-start: 45.6642%;
  inline-size: 11.0795%;
  block-size: 5.1203%;
}

.mezhdu-collage-composition__item--memory-28 {
  z-index: 28;
  inset-block-start: 86.1675%;
  inset-inline-start: 66.5301%;
  inline-size: 7.3114%;
  block-size: 1.9115%;
}

.mezhdu-collage-composition__item--memory-29 {
  z-index: 29;
  inset-block-start: 69.8906%;
  inset-inline-start: 17.451%;
  inline-size: 14.309%;
  block-size: 4.8129%;
}

.mezhdu-collage-composition__item--memory-30 {
  z-index: 30;
  inset-block-start: 5.019%;
  inset-inline-start: 5.3996%;
  inline-size: 24.3688%;
  block-size: 6.8509%;
}

.mezhdu-details {
  min-block-size: 464px;
}

.mezhdu-details__art {
  position: absolute;
  inset-block-start: -27px;
  inset-inline-start: -55px;
  z-index: 0;
  inline-size: min(33.7vw, 509px);
  transform: rotate(-39.91deg);
  transform-origin: center;
  pointer-events: none;
}

.mezhdu-details__art img {
  block-size: auto;
}

.mybox-media-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-800) var(--space-grid-gap);
  inline-size: 100%;
}

.mybox-media,
.mybox-collage__item {
  margin: 0;
  min-inline-size: 0;
}

.mybox-media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.mybox-media video {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.mybox-media--placeholder {
  grid-column: 1 / -1;
  aspect-ratio: 1464 / 820;
  border-radius: var(--radius-sm);
  background: var(--color-black);
}

.mybox-media--product-phone {
  grid-column: 1 / span 6;
  aspect-ratio: 726 / 1038;
}

.mybox-media--icon {
  grid-column: 7 / span 6;
  aspect-ratio: 1;
}

.mybox-media--juneau,
.mybox-media--blue-screens,
.mybox-collage,
.mybox-media--chair-phone,
.mybox-palette {
  grid-column: 1 / -1;
}

.mybox-media--juneau {
  aspect-ratio: 1464 / 904;
}

.mybox-palette {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 32px var(--space-grid-gap);
}

.mybox-token {
  --token-hex-ink: var(--color-white);

  display: flex;
  flex-direction: column;
  gap: 10px;
  min-inline-size: 0;
}

.mybox-token__swatch {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 200 / 100;
  inline-size: 100%;
  border-radius: var(--radius-sm);
  background: var(--token-color);
  outline-offset: 4px;
}

.mybox-token__swatch::after {
  content: attr(data-hex);
  color: var(--token-hex-ink);
  font: inherit;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 160ms linear,
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mybox-token:hover .mybox-token__swatch::after,
.mybox-token:focus-within .mybox-token__swatch::after {
  opacity: 1;
  transform: translateY(0);
}

.mybox-token__label {
  color: var(--color-text-primary);
}

.mybox-token--orange-50 {
  --token-color: #fff7ed;
  --token-hex-ink: #441306;
}

.mybox-token--orange-100 {
  --token-color: #ffedd4;
  --token-hex-ink: #441306;
}

.mybox-token--orange-200 {
  --token-color: #ffd6a7;
  --token-hex-ink: #441306;
}

.mybox-token--orange-300 {
  --token-color: #ffb86a;
  --token-hex-ink: #441306;
}

.mybox-token--orange-400 {
  --token-color: #ff8904;
  --token-hex-ink: #441306;
}

.mybox-token--orange-500 {
  --token-color: #ff6900;
}

.mybox-token--orange-600 {
  --token-color: #f54900;
}

.mybox-token--orange-700 {
  --token-color: #ca3500;
}

.mybox-token--orange-800 {
  --token-color: #9f2d00;
}

.mybox-token--orange-900 {
  --token-color: #7e2a0c;
}

.mybox-token--orange-950 {
  --token-color: #441306;
}

.mybox-token--zinc-100 {
  --token-color: #f4f4f5;
  --token-hex-ink: #09090b;
}

.mybox-token--zinc-500 {
  --token-color: #71717b;
}

.mybox-token--zinc-950 {
  --token-color: #09090b;
}

.mybox-media-copy {
  grid-column: 1 / span 5;
  align-self: center;
  padding-inline: var(--space-1600);
  text-align: center;
}

.mybox-media-copy p {
  margin: 0;
}

.mybox-media--product-card {
  grid-column: 6 / span 7;
  align-self: center;
  aspect-ratio: 1;
}

.mybox-media--blue-screens {
  aspect-ratio: 1464 / 1038;
}

.mybox-media--dark-theme {
  grid-column: 1 / span 6;
  aspect-ratio: 726 / 760;
}

.mybox-media--drink {
  grid-column: 7 / span 6;
  aspect-ratio: 726 / 1038;
}

.mybox-collage {
  position: relative;
  aspect-ratio: 1464 / 1486;
  overflow: clip;
  border-radius: var(--radius-sm);
  background: #441306;
}

.mybox-collage__item {
  position: absolute;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.mybox-collage__item img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.mybox-collage__item--01 {
  inset-block-start: 1.884%;
  inset-inline-start: -13.388%;
  inline-size: 35.178%;
}

.mybox-collage__item--02 {
  inset-block-start: 28.466%;
  inset-inline-start: 28.142%;
  inline-size: 43.716%;
}

.mybox-collage__item--03 {
  inset-block-start: 79.475%;
  inset-inline-start: -3.757%;
  inline-size: 38.32%;
}

.mybox-collage__item--04 {
  inset-block-start: -4.98%;
  inset-inline-start: 28.142%;
  inline-size: 18.579%;
}

.mybox-collage__item--05 {
  inset-block-start: 79.475%;
  inset-inline-start: 43.716%;
  inline-size: 23.907%;
}

.mybox-collage__item--06 {
  inset-block-start: 41.05%;
  inset-inline-start: 79.918%;
  inline-size: 14.481%;
}

.mybox-collage__item--07 {
  inset-block-start: 65.411%;
  inset-inline-start: 79.918%;
  inline-size: 39.276%;
}

.mybox-collage__item--08 {
  inset-block-start: 48.654%;
  inset-inline-start: -5.738%;
  inline-size: 18.989%;
}

.mybox-collage__item--09 {
  inset-block-start: -3.634%;
  inset-inline-start: 74.727%;
  inline-size: 27.459%;
}

.mybox-media--chair-phone {
  aspect-ratio: 1464 / 1098.5675;
}

.mybox-media__caption {
  margin-block-start: var(--space-300);
  color: var(--color-text-muted);
}

.utochka-media-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  inline-size: 100%;
}

.utochka-media {
  margin: 0;
  aspect-ratio: 1464 / 871;
  overflow: clip;
  border-radius: var(--radius-sm);
}

.utochka-media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.utochka-media--10 {
  aspect-ratio: 1651 / 1080;
}

.mos-media-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-grid-gap);
  row-gap: var(--space-800);
  inline-size: 100%;
}

.mos-media {
  margin: 0;
  overflow: clip;
  border-radius: var(--radius-sm);
}

.mos-media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.mos-media--01 {
  grid-column: 1 / -1;
  aspect-ratio: 1464 / 888;
}

.mos-media--02 {
  grid-column: 1 / -1;
  aspect-ratio: 1464 / 888;
}

.mos-media--03 {
  grid-column: 1 / span 6;
  aspect-ratio: 726 / 840;
}

.mos-media--04 {
  grid-column: 7 / span 6;
  aspect-ratio: 726 / 929;
}

.mos-media--05 {
  grid-column: 1 / -1;
  aspect-ratio: 1464 / 888;
}

.mos-media--06 {
  grid-column: 3 / span 8;
  aspect-ratio: 972 / 763;
}

.mos-media--07 {
  grid-column: 4 / span 6;
  aspect-ratio: 726 / 1028;
}

.mos-media--08 {
  grid-column: 2 / span 10;
  aspect-ratio: 1218 / 1278;
}

.mos-media--09 {
  grid-column: 2 / span 10;
  aspect-ratio: 1218 / 1058;
}

.mos-media--10 {
  grid-column: 2 / span 10;
  aspect-ratio: 1218 / 1243;
}

.mos-media--11 {
  grid-column: 2 / span 10;
  aspect-ratio: 1218 / 1693;
}

.mos-media--12 {
  grid-column: 2 / span 10;
  aspect-ratio: 1218 / 1959;
}

.mos-media--13 {
  grid-column: 2 / span 10;
  aspect-ratio: 1218 / 1595;
}

.mos-media--14 {
  grid-column: 1 / -1;
  aspect-ratio: 1464 / 915;
}

.utochka-details {
  min-block-size: 0;
}

.mos-details {
  min-block-size: 0;
}

.schrift-shop-details {
  min-block-size: 0;
}

/* Schrift Shop — composite media sections (Figma 2155-19394, 2214-1838, 2214-1885, 2214-1924) */
.schrift-shop-comp {
  inline-size: 100%;
}

.schrift-shop-comp__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-grid-gap);
  row-gap: var(--space-800);
  inline-size: 100%;
}

.schrift-shop-comp__cell {
  min-inline-size: 0;
}

.schrift-shop-comp__cell--full {
  grid-column: 1 / -1;
}

.schrift-shop-comp__cell--span-6 {
  grid-column: span 6;
}

.schrift-shop-comp__cell--inset-10 {
  grid-column: 2 / span 10;
}

.schrift-shop-comp__row {
  grid-column: 1 / -1;
  min-inline-size: 0;
}

.schrift-shop-comp__row-split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-grid-gap);
  row-gap: var(--space-800);
  align-items: start;
}

.schrift-shop-comp__row-split > * {
  grid-column: span 6;
  min-inline-size: 0;
}

.schrift-shop-comp__row--align-end .schrift-shop-comp__row-split > *:first-child {
  align-self: end;
}

.schrift-shop-comp__slot {
  margin: 0;
  display: block;
  overflow: clip;
  border-radius: var(--radius-sm);
}

.schrift-shop-comp__slot > img,
.schrift-shop-comp__frame > img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.schrift-shop-comp__frame {
  box-sizing: border-box;
  border-radius: var(--radius-sm);
  overflow: clip;
  inline-size: 100%;
}

.schrift-shop-comp__frame--surface {
  background-color: var(--color-surface-featured-raw);
}

.schrift-shop-comp__frame--stage-dark {
  background-color: var(--color-black);
}

.schrift-shop-comp__frame--padded-xl {
  padding-inline: var(--space-1600);
  padding-block: var(--space-600);
}

.schrift-shop-comp__frame--fill {
  inline-size: 100%;
}

/* Case slideshows — hard cut every 1.25s */
.schrift-shop-comp__slideshow,
.humans-media__slideshow {
  display: grid;
  inline-size: 100%;
  border-radius: 0;
  overflow: clip;
}

.schrift-shop-comp__slideshow {
  aspect-ratio: 4096 / 3990;
}

.humans-media__slideshow {
  block-size: 100%;
}

.schrift-shop-comp__slideshow > img,
.schrift-shop-comp__slideshow > .pimg,
.humans-media__slideshow > img,
.humans-media__slideshow > .pimg {
  grid-area: 1 / 1;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  border-radius: 0;
  position: relative;
  z-index: 0;
}

.schrift-shop-comp__slideshow > img.is-active,
.schrift-shop-comp__slideshow > .pimg.is-active,
.humans-media__slideshow > img.is-active,
.humans-media__slideshow > .pimg.is-active {
  opacity: 1;
  z-index: 1;
}

.schrift-shop-comp__slideshow .pimg__full,
.schrift-shop-comp__slideshow .pimg__placeholder,
.humans-media__slideshow .pimg__full,
.humans-media__slideshow .pimg__placeholder {
  inline-size: 100%;
  block-size: 100%;
  border-radius: 0;
  transition: none;
}

.schrift-shop-comp__slideshow .pimg__full,
.schrift-shop-comp__slideshow .pimg__placeholder {
  object-fit: contain;
}

.humans-media__slideshow .pimg__full,
.humans-media__slideshow .pimg__placeholder {
  object-fit: cover;
}

/* Schrift Shop — Gill tiles (background + no rounding) */
.schrift-shop-comp__frame--surface-gill {
  background-color: #f2f4f7;
  border-radius: 0;
}

.schrift-shop-comp__frame--surface-gill img {
  border-radius: 0;
}

.schrift-shop-comp[data-figma-node="2214-1838"] .schrift-shop-comp__frame--surface-gill {
  aspect-ratio: 1 / 1;
  overflow: clip;
}

.schrift-shop-comp[data-figma-node="2214-1838"] .schrift-shop-comp__frame--surface-gill > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.schrift-shop-comp__ph {
  display: block;
  inline-size: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--color-white);
  border: none;
  border-radius: var(--radius-sm);
}

/* When progressive-image wrapper is also used as a placeholder frame, keep pimg's grid overlay. */
.schrift-shop-comp__ph.pimg {
  display: grid;
}

/* If media sits inside a framed background, remove inner rounding. */
.schrift-shop-comp__frame--stage-dark .schrift-shop-comp__ph,
.schrift-shop-comp__frame--surface .schrift-shop-comp__ph {
  border-radius: 0;
}

.schrift-shop-comp__frame--stage-dark .schrift-shop-comp__ph :is(.pimg__full, .pimg__placeholder, .pimg__picture),
.schrift-shop-comp__frame--surface .schrift-shop-comp__ph :is(.pimg__full, .pimg__placeholder, .pimg__picture),
.schrift-shop-comp__frame--stage-dark .schrift-shop-comp__ph.pimg > .pimg__full,
.schrift-shop-comp__frame--surface .schrift-shop-comp__ph.pimg > .pimg__full {
  border-radius: 0;
}

.schrift-shop-comp__ph--edge {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.schrift-shop-comp__ph--surface {
  background-color: #f2f4f7;
}

.schrift-shop-comp__ph--on-dark {
  background-color: var(--color-black);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38);
}

/* On dark stage frames, avoid white hairline borders around media. */
.schrift-shop-comp__frame--stage-dark .schrift-shop-comp__ph--edge,
.schrift-shop-comp__frame--stage-dark .schrift-shop-comp__ph--on-dark {
  box-shadow: none;
}

.schrift-shop-comp__ph--1464-888 {
  aspect-ratio: 1464 / 888;
}

.schrift-shop-comp__ph--4096-3990 {
  aspect-ratio: 4096 / 3990;
}

.schrift-shop-comp__ph--square {
  aspect-ratio: 1 / 1;
}

.schrift-shop-comp__ph--1089-4096 {
  aspect-ratio: 1089 / 4096;
}

.schrift-shop-comp__ph--1656-4096 {
  aspect-ratio: 1656 / 4096;
}

.schrift-shop-comp__ph--2880-2826 {
  aspect-ratio: 2880 / 2826;
}

.schrift-shop-comp__ph--1067-1600 {
  aspect-ratio: 1067 / 1600;
}

.mybox-details {
  min-block-size: 0;
}

.mybox-details__section:nth-of-type(1) {
  grid-column: 1 / span 4;
}

.mybox-details__section:nth-of-type(2) {
  grid-column: 5 / span 4;
}

.mybox-details__section:nth-of-type(3) {
  grid-column: 9 / span 4;
}

.humans-media-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  column-gap: var(--space-grid-gap);
  row-gap: 32px;
  inline-size: 100%;
}

.humans-media {
  margin: 0;
  inline-size: 100%;
  min-inline-size: 0;

  --humans-media-bg: var(--color-black);

  border-radius: var(--radius-sm);
  background: var(--humans-media-bg);
  overflow: hidden;
  overflow: clip;
}

/* Progressive overlay uses .pimg { display: grid }; do not force display:block on .pimg here. */
.humans-media > .pimg {
  display: grid;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 0;
}

.humans-media img,
.humans-media .pimg__full,
.humans-media .pimg__placeholder {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: 0;
}

.humans-media--laptop,
.humans-media--banking,
.humans-media--portrait,
.humans-media--billboards,
.humans-media--palette,
.humans-media--features {
  grid-column: 1 / -1;
}

.humans-media--laptop {
  aspect-ratio: 1464 / 1098;
}

.humans-media--banking {
  aspect-ratio: 1464 / 935;
}

.humans-media--portrait {
  aspect-ratio: 1464 / 824;
}

.humans-media--billboards {
  aspect-ratio: 1464 / 1098;
}

.humans-media--palette {
  aspect-ratio: 1464 / 726;
}

.humans-media--features {
  aspect-ratio: 1464 / 935;
}

.humans-media--aa-left {
  grid-column: 1 / span 6;
  aspect-ratio: 1;
}

.humans-media--aa-right {
  grid-column: 7 / span 6;
  aspect-ratio: 1;
}

.humans-media--icon-wifi {
  --humans-media-bg: #3326af;

  grid-column: 1 / span 4;
  aspect-ratio: 1;
}

.humans-media--icon-bus {
  --humans-media-bg: #ca3a65;

  grid-column: 5 / span 4;
  aspect-ratio: 1;
}

.humans-media--icon-lamp {
  --humans-media-bg: #feffb6;

  grid-column: 9 / span 4;
  aspect-ratio: 1;
}

.humans-media--icon-coffee {
  --humans-media-bg: #d5f9ff;

  grid-column: 1 / span 4;
  aspect-ratio: 1;
}

.humans-media--screensaver {
  grid-column: 5 / span 8;
  aspect-ratio: 1;
  overflow: hidden;
}

.humans-media__embed {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .humans-media--screensaver .humans-media__embed {
    display: none;
  }
}

.humans-media--phone-chair {
  grid-column: 1 / span 6;
  aspect-ratio: 726 / 907.5;
}

.humans-media--ui-screen {
  grid-column: 7 / span 6;
  aspect-ratio: 726 / 907.5;
}

.humans-media--cafe {
  grid-column: 1 / span 4;
  aspect-ratio: 1;
}

.humans-media--bookshop {
  grid-column: 5 / span 4;
  aspect-ratio: 1;
}

.humans-media--data {
  grid-column: 9 / span 4;
  aspect-ratio: 1;
}

.humans-details__section--details {
  grid-column: 5 / span 4;
}

.humans-details__section--team {
  grid-column: 9 / span 4;
}

@media (min-width: 1920px) {
  .case-prose {
    grid-column: 5 / span 5;
  }
}

.card--top2019 .card__media {
  background: var(--color-card-default);
}

.card--nostalgia .card__media {
  background: url("../assets/figma/Nostalgia Box Image.svg") center / contain no-repeat;
}

.card--shader .card__media {
  background:
    radial-gradient(120% 90% at 85% 80%, rgba(255, 102, 64, 0.32), rgba(0, 0, 0, 0) 60%),
    radial-gradient(100% 85% at 20% 20%, rgba(255, 102, 64, 0.28), rgba(0, 0, 0, 0) 55%),
    #020204;
}

.card--untitled .card__media {
  background: var(--color-accent-lemon);
}

.card--untitled .card__media > img {
  mix-blend-mode: darken;
}

.card--untitled .card__media .card__untitled-overlay {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.card--untitled .card__media .card__untitled-overlay img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 1023px) {
  .case-text-block {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .case-note,
  .case-prose,
  .case-lead-prose {
    grid-column: 1 / -1;
  }

  .case-prose {
    grid-row: 1;
  }

  .case-note {
    grid-row: 2;
  }

  .case-media-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .case-media-grid__feature,
  .case-media-grid__panel--unit,
  .case-media-grid__panel--formulating,
  .case-media-grid__panel--retros {
    grid-column: 1 / -1;
  }

  .case-media-grid__panel--retros img {
    inline-size: min(100%, 76vw);
  }

  .case-reference-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .case-details {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    min-block-size: 0;
    overflow: visible;
  }

  .case-details__art {
    inset-block-start: 48px;
    inset-inline-start: 0;
    inline-size: min(42vw, 360px);
  }

  .case-details__section--details,
  .case-details__section--team {
    grid-column: 1 / -1;
  }

  .case-details__item {
    padding-inline-end: 0;
  }

  .case-reference-item--glyphs,
  .case-reference-item--specimen,
  .case-reference-item--article,
  .case-reference-item--score {
    grid-column: 1 / -1;
  }

  .case-reference-poster {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .case-reference-poster__frame,
  .case-reference-poster__caption {
    grid-column: 1 / -1;
  }

  .mezhdu-media-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .mos-media-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .made-by-mad-media-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .made-by-mad-media--01,
  .made-by-mad-media--06,
  .made-by-mad-media--07,
  .made-by-mad-media--05 {
    grid-column: 1 / -1;
  }

  .made-by-mad-media--02,
  .made-by-mad-media--03,
  .made-by-mad-media--04 {
    grid-column: 1 / -1;
  }

  .made-by-mad-media-duo {
    flex-direction: column;
    padding: var(--space-600);
  }

  .made-by-mad-media-duo .made-by-mad-ph--393-774 {
    flex: 0 0 auto;
    inline-size: min(393px, 100%);
  }

  .schrift-shop-comp__grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .schrift-shop-comp__cell--full,
  .schrift-shop-comp__cell--span-6,
  .schrift-shop-comp__cell--inset-10 {
    grid-column: 1 / -1;
  }

  .schrift-shop-comp__row-split {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .schrift-shop-comp__row-split > * {
    grid-column: 1 / -1;
  }

  .mos-media--01,
  .mos-media--02,
  .mos-media--03,
  .mos-media--04,
  .mos-media--05,
  .mos-media--06,
  .mos-media--07,
  .mos-media--08,
  .mos-media--09,
  .mos-media--10,
  .mos-media--11,
  .mos-media--12,
  .mos-media--13,
  .mos-media--14 {
    grid-column: 1 / -1;
  }

  .case-hero--mos .case-hero__summary {
    grid-column: 1 / -1;
  }

  .case-hero--schrift-shop .case-hero__summary {
    grid-column: 1 / -1;
  }

  .top2019-media-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .top2019-media--01,
  .top2019-media--02,
  .top2019-media--03,
  .top2019-media--04,
  .top2019-media--05,
  .top2019-media--06,
  .top2019-media--07,
  .top2019-media--08,
  .top2019-media--09,
  .top2019-media--10,
  .top2019-media--11,
  .top2019-media--12,
  .top2019-media--13,
  .top2019-media--14 {
    grid-column: 1 / -1;
  }

  .case-hero--top-2019 .case-hero__summary {
    grid-column: 1 / -1;
  }

  .case-hero--humans .case-hero__summary {
    grid-column: 1 / -1;
  }

  .case-text-block--lead-span-8 .case-lead-prose {
    grid-column: 1 / -1;
  }

  .mezhdu-media--laptop,
  .mezhdu-media--mestovkotorom,
  .mezhdu-media--etoya {
    grid-column: 1 / -1;
    inline-size: 100%;
  }

  .mezhdu-media--rukinozhnicy {
    grid-column: 1 / span 4;
  }

  .mezhdu-media--ai-ai-ai {
    grid-column: 5 / span 4;
  }

  .mezhdu-details__art {
    inset-block-start: 48px;
    inset-inline-start: 0;
    inline-size: min(42vw, 360px);
  }

  .mybox-media-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .mybox-media--placeholder,
  .mybox-media--product-phone,
  .mybox-media--icon,
  .mybox-media--juneau,
  .mybox-media--product-card,
  .mybox-media--blue-screens,
  .mybox-media--dark-theme,
  .mybox-media--drink,
  .mybox-collage,
  .mybox-media--chair-phone,
  .mybox-palette,
  .mybox-media-copy {
    grid-column: 1 / -1;
  }

  .mybox-palette {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mybox-media-copy {
    padding-inline: var(--space-1600);
  }

  .mybox-details__section:nth-of-type(1),
  .mybox-details__section:nth-of-type(2),
  .mybox-details__section:nth-of-type(3) {
    grid-column: 1 / -1;
  }

  .humans-media-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .humans-media--laptop,
  .humans-media--banking,
  .humans-media--portrait,
  .humans-media--billboards,
  .humans-media--palette,
  .humans-media--features,
  .humans-media--aa-left,
  .humans-media--aa-right,
  .humans-media--icon-wifi,
  .humans-media--icon-bus,
  .humans-media--icon-lamp,
  .humans-media--icon-coffee,
  .humans-media--screensaver,
  .humans-media--phone-chair,
  .humans-media--ui-screen,
  .humans-media--cafe,
  .humans-media--bookshop,
  .humans-media--data {
    grid-column: 1 / -1;
  }

  .humans-details__section--details,
  .humans-details__section--team {
    grid-column: 1 / -1;
  }

  .hero__wrapper {
    block-size: auto;
    padding-block-end: var(--space-1200);
  }

  .hero__profile {
    position: static;
    transform: none;
    margin-block: var(--space-1200);
    margin-inline-start: calc(-1 * var(--hero-mobile-profile-optical-offset-inline));
    margin-inline-end: 0;
    inline-size: clamp(140px, 38vw, 196px);
  }

  .hero__wrapper > .hero__grid:last-of-type {
    position: static;
  }

  .hero__headline {
    grid-column: 1 / -1;
  }

  .hero__caption {
    grid-column: 1 / -1;
  }

  .hero__description {
    grid-column: 1 / -1;
    padding-inline-end: 0;
  }
}

@media (max-width: 767px) {
  .hero {
    padding-block: var(--hero-padding-block-start) var(--hero-padding-block-end-mobile);
  }

  .case-hero {
    padding-block: 0;
  }

  .hero__wrapper {
    inline-size: 100%;
    max-inline-size: none;
    margin-inline: 0;
    min-block-size: 0;
    block-size: auto;
    padding-block: var(--hero-mobile-inset);
  }

  .hero__wrapper > .hero__grid:first-of-type {
    position: relative;
    inset: auto;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    gap: var(--space-200);
  }

  .hero__headline {
    grid-column: 1 / -1;
    font-size: var(--type-display-xl-size);
    line-height: var(--type-display-xl-line-height);
  }

  .hero__profile {
    position: relative;
    inline-size: var(--hero-mobile-profile-size);
    inset: auto;
    transform: none;
    margin-block-start: var(--hero-mobile-profile-gap-before);
    margin-block-end: var(--hero-mobile-profile-gap-after);
    margin-inline-start: calc(-1 * var(--hero-mobile-profile-optical-offset-inline));
    margin-inline-end: 0;
  }

  .hero__wrapper > .hero__grid:last-of-type {
    position: relative;
    inset: auto;
    margin-block-start: 0;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    column-gap: var(--space-200);
    row-gap: var(--space-600);
  }

  .hero__description {
    grid-column: 1 / -1;
    order: 1;
    padding-inline-end: 0;
  }

  .hero__caption {
    grid-column: 1 / -1;
    order: 2;
  }

  .hero__description.prose,
  .hero__caption.prose {
    max-inline-size: none;
  }

  .cards-grid {
    row-gap: var(--space-1200);
    padding-block: var(--space-1200);
  }

  .case-hero__media-panel {
    block-size: auto;
    min-block-size: 0;
    padding-inline: var(--space-400);
    padding-block-end: var(--space-400);
  }

  .case-hero__media {
    flex: 0 0 auto;
    aspect-ratio: 358 / 506.615;
  }

  .case-hero__text-panel {
    block-size: auto;
    min-block-size: 0;
    gap: var(--space-1200);
    padding-block-start: var(--space-800);
    padding-block-end: var(--space-1600);
    padding-inline: var(--space-400);
  }

  .case-hero__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .case-hero__title,
  .case-hero__summary {
    grid-column: 1 / -1;
  }

  .case-text-block {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .case-media-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: var(--space-600);
  }

  .case-media-grid__panel--unit {
    padding: var(--space-400);
  }

  .case-media-grid__panel--formulating {
    padding-block-start: 24px;
    padding-inline: max(24px, var(--space-page-padding));
    padding-block-end: 0;
  }

  .case-media-grid__panel--retros {
    padding-block: 24px 0;
    padding-inline: var(--space-400);
  }

  .case-media-grid__panel--retros img {
    inline-size: min(100%, 72vw);
  }

  .mezhdu-media-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: var(--space-600);
  }

  .mos-media-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: var(--space-600);
  }

  .schrift-shop-media-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: var(--space-600);
  }

  .top2019-media-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: var(--space-600);
  }

  .case-hero--top-2019 .case-hero__media {
    aspect-ratio: 1464 / 803;
  }

  .case-hero--humans .case-hero__media {
    aspect-ratio: 1464 / 803;
  }

  .mezhdu-media--rukinozhnicy,
  .mezhdu-media--ai-ai-ai {
    grid-column: 1 / -1;
  }

  .mezhdu-media--ai-ai-ai {
    align-self: auto;
    aspect-ratio: 726 / 1255;
  }

  .mezhdu-social-grid {
    grid-template-columns: 1fr;
    gap: var(--space-600);
  }

  .mezhdu-collage__media {
    aspect-ratio: 353 / 1024;
  }

  .mezhdu-details__art {
    inline-size: min(78vw, 320px);
  }

  .case-reference-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: var(--space-400) var(--space-400) 0;
  }

  .case-reference-poster {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .case-reference-poster__frame,
  .case-reference-poster__caption {
    grid-column: 1 / -1;
  }

  .case-reference-poster__frame {
    padding: var(--space-400);
  }

  .case-editorial-gallery {
    gap: var(--space-600);
  }

  .case-editorial-gallery__canvas {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-400);
    aspect-ratio: auto;
    padding: var(--space-400);
  }

  .case-editorial-gallery__item {
    position: static;
    grid-column: span 2;
    inline-size: auto;
  }

  .case-editorial-gallery__item:nth-child(3n + 1) {
    grid-column: 1 / -1;
  }

  .case-editorial-gallery__detail-grid {
    grid-template-columns: 1fr;
    padding: var(--space-400);
  }

  .mybox-media-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: var(--space-600);
  }

  .humans-media-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: var(--space-600);
  }

  .mybox-media-copy {
    padding-inline: 0;
    text-align: start;
  }

  .mybox-palette {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-600) var(--space-400);
  }

  .case-details {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .case-details__art {
    inline-size: min(78vw, 320px);
  }

  .case-details__section {
    gap: var(--space-600);
  }

  .card {
    grid-column: span 4;
  }
}

.footer__wrapper {
  position: relative;
  flex: 1 1 auto;
  block-size: 100%;
  min-block-size: 0;
  max-block-size: 100%;
  overflow: hidden;
  inline-size: 100%;
}

.footer__message-grid,
.footer__meta-grid {
  position: absolute;

  /* Inset from padding box edges so tracks align with content box (same as --space-page-padding on .container) */
  left: var(--space-page-padding);
  right: var(--space-page-padding);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-grid-gap);
  z-index: 1;
}

.footer__message-grid {
  top: 50%;
  transform: translateY(-50%);
}

.footer__message {
  grid-column: 1 / span 10;
  color: var(--footer-tagline-color);
}

.footer__message strong {
  color: var(--color-text-inverse);
  font-weight: var(--type-display-xl-weight);
}

.footer__cta {
  color: inherit;
  text-decoration: none;
}

.footer__cta:hover {
  text-decoration: none;
}

.footer__cta:focus-visible {
  outline: 2px solid var(--color-text-inverse);
  outline-offset: 4px;
  border-radius: var(--radius-xs);
}

.footer__meta-grid {
  bottom: 56px;
}

.footer__meta {
  grid-column: 1 / span 4;
  color: var(--footer-tagline-color);
  letter-spacing: var(--footer-meta-tracking);
}

.footer__meta p {
  margin: 0;
}

.footer__meta p + p {
  margin-top: var(--footer-meta-stack-gap);
}

.footer__meta strong {
  color: var(--color-text-inverse);
  font-weight: var(--type-caption-weight);
}

.footer__meta-link {
  color: inherit;
  text-decoration: none;
}

.footer__meta-link:hover {
  text-decoration: none;
}

.footer__meta-link:focus-visible {
  outline: 2px solid var(--color-text-inverse);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.footer__model {
  position: absolute;
  right: -178px;
  top: calc(50% + 40.5px);
  transform: translateY(-50%);
  width: 935px;
  height: 959px;
  pointer-events: none;
  mix-blend-mode: lighten;
  z-index: 0;
}

.footer__model img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1023px) {
  .footer__message-grid {
    top: clamp(88px, 14dvh, 120px);
    transform: none;
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .footer__meta-grid {
    bottom: 40px;
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .footer__message,
  .footer__meta {
    grid-column: 1 / -1;
  }

  .footer__model {
    width: 560px;
    height: min(570px, calc(100dvh - 160px));
    right: -120px;
    top: 58%;
  }
}

@media (max-width: 767px) {
  .footer__message-grid {
    top: clamp(40px, 10dvh, 64px);
  }

  .footer__message-grid,
  .footer__meta-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .footer__meta-grid {
    bottom: calc(clamp(28px, 8dvh, 48px) + env(safe-area-inset-bottom, 0px));
  }

  .footer__model {
    left: 0;
    right: 0;
    top: clamp(92px, 19dvh, 116px);
    bottom: calc(clamp(112px, 22dvh, 141px) + env(safe-area-inset-bottom, 0px));
    width: auto;
    height: auto;
    transform: none;
  }
}