/* Work detail pages: current Paak type, project-first opening and bare films. */
.inner-page--case {
  --paak-case-title-measure: 18ch;
  --paak-case-summary-measure: 34ch;
  --paak-case-copy-measure: 50ch;
  --paak-case-section-measure: 24ch;
  --paak-case-opening-top: calc(
    var(--paak-inner-header-height) + var(--paak-lower-heading-gap)
  );
  --paak-case-heading-columns: var(--paak-lower-grid);
  --paak-case-overview-min-height: calc(520px * var(--scale));
}
.inner-page--case main {
  padding-top: var(--paak-case-opening-top);
  container-type: inline-size;
}
.inner-page--case :where(h1, h2, h3, p, a, figcaption, button) {
  font-family: var(--font-body);
  font-weight: 400;
}
.case-heading {
  display: grid;
  grid-template-columns: var(--paak-case-heading-columns);
  gap: var(--paak-lower-gap);
  align-items: start;
  margin-bottom: var(--paak-lower-heading-gap);
}
/* Every case reserves the same opening space; long copy can expand safely. */
@media (width >= 1024px) {
  .inner-page--case :is(.case-heading, .room-project-overview) {
    min-height: var(--paak-case-overview-min-height);
  }
}
.inner-page--case .case-heading h1 {
  grid-column: 1 / span 7;
  max-width: var(--paak-case-title-measure);
  font-size: var(--paak-type-statement);
  line-height: var(--paak-leading-statement);
  letter-spacing: var(--paak-tracking-statement);
  text-wrap: pretty;
}
.case-opening-copy {
  grid-column: 9 / -1;
  min-width: 0;
}
.case-summary {
  max-width: var(--paak-case-summary-measure);
  font-size: var(--paak-type-copy-large);
  line-height: var(--paak-leading-emphasis);
  letter-spacing: var(--paak-tracking-emphasis);
  text-wrap: pretty;
}
.case-scope {
  margin-top: var(--paak-lower-copy-gap);
  font-size: var(--paak-type-small);
  line-height: var(--paak-leading-body);
  color: var(--paak-muted-on-light);
}
.inner-page--case :where(.text-section, .caption, .project-end) h2 {
  font-size: var(--paak-type-section);
  line-height: var(--paak-leading-heading);
  letter-spacing: var(--paak-tracking-statement);
  max-width: var(--paak-case-section-measure);
  text-wrap: balance;
}
.inner-page--case :where(.text-section, .caption) > h2 {
  grid-column: 1 / span 5;
}
.inner-page--case :where(.text-section, .caption) > :is(div, p) {
  grid-column: 7 / -1;
  min-width: 0;
}
.inner-page--case :where(.text-section, .caption) p {
  font-size: var(--paak-type-label);
  line-height: var(--paak-leading-body);
  letter-spacing: var(--paak-tracking-body);
  max-width: var(--paak-case-copy-measure);
  text-wrap: pretty;
}
.inner-page--case .caption p {
  color: var(--paak-surface-dark);
  text-wrap: balance;
}
.inner-page--case figcaption {
  font-size: var(--paak-type-small);
  line-height: var(--paak-leading-body);
}
.inner-page--case .project-end > div:first-child {
  grid-column: 1 / span 8;
}
.inner-page--case .project-end .project-nav {
  grid-column: 10 / -1;
  align-self: end;
  justify-self: end;
}
.project-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--paak-hit-target);
}
.inner-page--case video[data-case-film] {
  cursor: pointer;
}
@media (scripting: enabled) {
  .inner-page--case .inner-header {
    container-type: inline-size;
  }
}
@container (width < 1024px) {
  .inner-page--case .inner-nav,
  .inner-page--case .inner-header-cta {
    display: none;
  }
  .inner-page--case .inner-menu-button {
    display: block;
    grid-column: -2 / -1;
    justify-self: end;
  }
}
@media (width < 1024px) {
  .case-opening-copy {
    grid-column: 8 / -1;
  }
}
@media (width < 768px) {
  .case-heading {
    row-gap: var(--paak-lower-copy-gap);
  }
  .inner-page--case .case-heading h1,
  .case-opening-copy {
    grid-column: 1 / -1;
  }
  .inner-page--case :where(.text-section, .caption) > :is(h2, div, p) {
    grid-column: 1 / -1;
  }
  .inner-page--case .caption {
    row-gap: var(--paak-lower-copy-gap);
  }
  .inner-page--case .project-end > div:first-child,
  .inner-page--case .project-end .project-nav {
    grid-column: 1 / -1;
    justify-self: start;
  }
}
@container (width < 768px) {
  .case-heading {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--paak-lower-copy-gap);
  }
  .inner-page--case .case-heading h1,
  .case-opening-copy {
    grid-column: 1;
  }
  .inner-page--case :where(.text-section, .caption, .project-end) {
    grid-template-columns: minmax(0, 1fr);
  }
  .inner-page--case
    :where(.text-section, .caption, .project-end)
    > :is(h2, div, p) {
    grid-column: 1;
    justify-self: start;
  }
  .inner-page--case .caption {
    row-gap: var(--paak-lower-copy-gap);
  }
  .inner-page--case .device-stage {
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    padding: var(--paak-lower-gap);
    gap: var(--paak-lower-gap);
  }
}