.after-art,
.after-art-footer {
  width: min(calc(100% - var(--gutter) * 2), 80rem);
  margin-inline: auto;
  color: var(--ink);
}

.after-art {
  --after-gap: 2.5rem;
  --after-title: clamp(2.5rem, 4.5vw, 4rem);
  --after-body: clamp(1rem, 1.5vw, 1.25rem);
  --after-caption: .8125rem;
}

.archive-edit {
  padding-block: 4rem 6rem;
}

.after-art-heading {
  max-width: 52rem;
  margin-bottom: var(--after-gap);
}

.after-art-heading h2 {
  font-family: var(--nadia-goth);
  font-size: var(--after-title);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.after-art-heading p {
  max-width: 44ch;
  margin-top: 1rem;
  font-size: var(--after-body);
  line-height: 1.5;
  text-wrap: pretty;
}

.archive-spread {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: end;
  gap: 4rem;
}

.archive-study {
  min-width: 0;
}

.archive-study img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.archive-study--main img {
  aspect-ratio: 1263 / 893;
}

.archive-study--detail img {
  aspect-ratio: 893 / 1107;
}

.archive-study figcaption,
.studio-material figcaption {
  margin-top: 1rem;
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--after-caption);
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
}

.corpus-studio {
  padding-block: 0 6rem;
}

.studio-wordmark {
  width: min(100%, 42rem);
  margin-bottom: var(--after-gap);
  font-weight: 400;
}

.studio-wordmark .corpus-logo-crop {
  width: 100%;
  aspect-ratio: 4.1;
  overflow: hidden;
}

.studio-wordmark .corpus-logo-crop img {
  filter: none;
  mix-blend-mode: multiply;
}

.studio-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: center;
  gap: 4rem;
}

.studio-material {
  min-width: 0;
}

.studio-material .corpus-art {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-size: cover;
  background-position: 78% center;
  transform: none;
  will-change: auto;
}

.studio-material .corpus-art video {
  object-fit: cover;
  object-position: 78% center;
}

.studio-information {
  min-width: 0;
  padding-bottom: 2.5rem;
}

.studio-information h3 {
  max-width: 18ch;
  font-family: var(--sans);
  font-size: clamp(1.5625rem, 2.4vw, 2rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.studio-information p {
  max-width: 38ch;
  margin-top: 1.5rem;
  font-size: var(--after-body);
  line-height: 1.6;
  text-wrap: pretty;
}

.after-art-end {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--line);
}

.after-art-links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 2.5rem;
}

.after-art a,
.after-art-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
  transition: color 180ms ease-out, text-decoration-color 180ms ease-out;
}

.after-art-links a {
  font-family: var(--sans);
  font-size: 1rem;
}

.after-art-return,
.after-art-footer > a:last-child {
  font-family: var(--mono);
  font-size: .8125rem;
  line-height: 1.5;
}

.after-art a:focus-visible,
.after-art-footer a:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 4px;
  text-decoration-color: currentColor;
}

.after-art a:active,
.after-art-footer a:active {
  color: var(--red);
  text-decoration-color: currentColor;
}

.after-art-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1rem 2.5rem;
}

@media (hover: hover) and (pointer: fine) {
  .after-art a:hover,
  .after-art-footer a:hover {
    color: var(--red);
    text-decoration-color: currentColor;
  }
}

@media (max-width: 1023px) {
  .archive-spread,
  .studio-layout {
    gap: 2.5rem;
  }

  .studio-wordmark {
    width: min(100%, 36rem);
  }

  .after-art-links {
    gap: .5rem 1.5rem;
  }
}

@media (max-width: 767px) {
  .after-art {
    --after-gap: 1.5rem;
    --after-title: clamp(2rem, 8vw, 3rem);
    --after-body: 1.0625rem;
  }

  .archive-edit {
    padding-block: 2.5rem 4rem;
  }

  .archive-spread,
  .studio-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }

  .archive-study--detail {
    width: 72%;
    justify-self: end;
  }

  .corpus-studio {
    padding-bottom: 4rem;
  }

  .studio-information {
    padding-bottom: 0;
  }

  .studio-information h3 {
    max-width: none;
    font-size: 1.5625rem;
  }

  .studio-information p {
    margin-top: 1rem;
  }

  .after-art-end {
    align-items: flex-start;
    flex-direction: column;
    gap: .5rem;
  }

  .after-art-links {
    gap: .5rem 1.5rem;
  }

  .after-art-links a {
    font-size: .9375rem;
  }

  .after-art-footer {
    align-items: flex-start;
    gap: 1rem;
    padding-block: .5rem 1.5rem;
  }

  .after-art-footer > a:last-child {
    max-width: 20ch;
    text-align: right;
  }
}

:root[data-reduced-motion="true"] .after-art a,
:root[data-reduced-motion="true"] .after-art-footer a {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .after-art a,
  .after-art-footer a {
    transition: none;
  }
}