.case-page {
  --case-paper: #f4f1eb;
  --case-ink: #1f1f1e;
  --case-muted: rgb(31 31 30 / 68%);
  --case-rule: rgb(31 31 30 / 22%);
  --case-measure: 94rem;
  background: var(--case-paper);
  color: var(--case-ink);
}

.case-study {
  overflow: clip;
}

.case-page .site-header {
  background: rgb(242 232 213 / 36%);
}

.case-hero,
.case-opening,
.case-chapter,
.case-transformation,
.case-role,
.case-result {
  inline-size: min(100%, calc(var(--case-measure) + (2 * var(--gutter))));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.case-hero {
  padding-block: clamp(8.5rem, 17svh, 12rem) clamp(8rem, 18svh, 13rem);
}

.case-hero__heading {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.55fr);
  grid-template-areas:
    "kicker aside"
    "title aside";
  gap: clamp(1.5rem, 3vw, 4rem) clamp(4rem, 8vw, 9rem);
  align-items: end;
}

.case-kicker,
.case-section-label {
  margin: 0;
  color: rgb(31 31 30 / 72%);
  font-size: clamp(0.7rem, 0.66rem + 0.12vw, 0.82rem);
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}

.case-kicker {
  grid-area: kicker;
  align-self: start;
}

.case-hero__title {
  grid-area: title;
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(5.75rem, min(11vw, 17svh), 11rem);
  font-weight: 300;
  letter-spacing: -0.065em;
  line-height: 0.78;
}

.case-title-mask {
  display: block;
  overflow: hidden;
  padding-block: 0.06em 0.22em;
  margin-block-end: -0.16em;
}

.case-title-mask > span {
  display: block;
  transform-origin: 50% 100%;
}

.case-title-mask--offset {
  padding-inline-start: clamp(2.5rem, 7vw, 8rem);
}

.case-hero__aside {
  grid-area: aside;
  display: grid;
  align-self: stretch;
  align-content: end;
  gap: clamp(2.5rem, 6svh, 4rem);
  min-width: 0;
  padding-block-end: 0.2em;
}

.case-hero__summary {
  max-inline-size: 31rem;
  margin: 0;
  color: var(--case-muted);
  font-size: clamp(1rem, 0.93rem + 0.3vw, 1.25rem);
  line-height: 1.65;
}

.case-hero__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border-block-start: 0.0625rem solid var(--case-rule);
}

.case-hero__meta div {
  min-width: 0;
  padding-block: 0.85rem;
  border-block-end: 0.0625rem solid var(--case-rule);
}

.case-hero__meta div:nth-child(odd) {
  padding-inline-end: 1rem;
}

.case-hero__meta div:nth-child(even) {
  padding-inline-start: 1rem;
  border-inline-start: 0.0625rem solid var(--case-rule);
}

.case-hero__meta dt,
.case-sheet__details dt,
.case-investment__ledger dt {
  color: rgb(31 31 30 / 56%);
  font-size: clamp(0.66rem, 0.62rem + 0.1vw, 0.75rem);
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
}

.case-hero__meta dd {
  margin: 0.38rem 0 0;
  font-size: clamp(0.78rem, 0.74rem + 0.12vw, 0.88rem);
  line-height: 1.4;
}

.case-hero__media {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: clamp(5rem, 11svh, 8rem) 0 0;
  overflow: hidden;
  border-radius: clamp(1.5rem, 3vw, 3.25rem);
  background: #dedad2;
  box-shadow: 0 2.5rem 7rem rgb(38 38 38 / 10%);
}

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

.case-hero__media img {
  object-position: center 55%;
}

.case-media-curtain {
  position: absolute;
  inset: 0;
  background: var(--case-paper);
  transform-origin: 100% 50%;
}

.case-opening {
  display: grid;
  grid-template-columns: minmax(11rem, 0.48fr) minmax(0, 1.52fr);
  column-gap: clamp(2rem, 5vw, 7rem);
  row-gap: 0;
  padding-block: clamp(9rem, 24svh, 17rem);
}

.case-opening > .case-section-label,
.case-chapter--context .case-chapter__heading > .case-section-label {
  position: relative;
  inset-block-start: clamp(0.3rem, 0.25rem + 0.15vw, 0.45rem);
}

.case-opening__lead {
  max-inline-size: 17ch;
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(3.25rem, 6.3vw, 7.2rem);
  font-weight: 300;
  letter-spacing: -0.055em;
  line-height: 0.98;
  text-wrap: balance;
}

.case-opening__body {
  grid-column: 2;
  justify-self: start;
  max-inline-size: 37rem;
  margin: clamp(2rem, 5svh, 4rem) 0 0;
  color: var(--case-muted);
  font-size: clamp(1.05rem, 0.98rem + 0.22vw, 1.25rem);
  line-height: 1.72;
}

.case-chapter {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  padding-block-end: clamp(10rem, 24svh, 17rem);
}

.case-chapter__heading {
  grid-column: 1 / 8;
}

.case-chapter__heading h2,
.case-transformation__intro h2,
.case-role__content h2,
.case-result__heading h2,
.case-investment__heading h2,
.case-sheet__heading h3 {
  margin: clamp(1.15rem, 2.5svh, 1.8rem) 0 0;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 300;
  letter-spacing: -0.055em;
  line-height: 0.98;
  text-wrap: balance;
}

.case-chapter__heading h2,
.case-transformation__intro h2,
.case-role__content h2,
.case-result__heading h2 {
  font-size: clamp(3.5rem, 6vw, 7rem);
}

.case-chapter__copy {
  grid-column: 8 / 13;
  align-self: end;
  color: var(--case-muted);
  font-size: clamp(1rem, 0.94rem + 0.2vw, 1.18rem);
  line-height: 1.72;
}

.case-chapter__copy p,
.case-transformation__copy p,
.case-role__copy p,
.case-result__copy p {
  margin: 0;
}

.case-chapter__copy p + p,
.case-transformation__copy p + p,
.case-role__copy p + p,
.case-result__copy p + p {
  margin-block-start: 1.25em;
}

.case-media {
  margin: 0;
  overflow: hidden;
  border-radius: clamp(1rem, 2vw, 2.25rem);
  background: #dedad2;
}

.case-media--landscape {
  aspect-ratio: 3 / 2;
}

.case-media--portrait {
  aspect-ratio: 2 / 3;
}

.case-context__landscape {
  grid-column: 1 / 9;
  margin-block-start: clamp(5rem, 12svh, 9rem);
}

.case-context__portrait {
  grid-column: 9 / 13;
  align-self: start;
  margin-block-start: clamp(5rem, 12svh, 9rem);
}

.case-context__landscape,
.case-context__portrait {
  block-size: clamp(24rem, 49vw, 36rem);
  aspect-ratio: auto;
}

.case-investment {
  padding: clamp(8rem, 20svh, 14rem) var(--gutter);
  background: var(--charcoal);
  color: var(--cream);
}

.case-investment__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(17rem, 0.55fr);
  gap: clamp(4rem, 9vw, 10rem);
  inline-size: min(100%, var(--case-measure));
  margin-inline: auto;
}

.case-investment .case-section-label,
.case-investment__ledger dt {
  color: rgb(242 232 213 / 58%);
}

.case-investment__heading h2 {
  max-inline-size: 11ch;
  color: var(--cream);
  font-size: clamp(4rem, 7vw, 8.5rem);
}

.case-investment__highlight {
  align-self: end;
  padding-block-end: clamp(0.5rem, 1svh, 1rem);
}

.case-investment__highlight strong {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(5rem, 9vw, 10rem);
  font-weight: 300;
  letter-spacing: -0.07em;
  line-height: 0.8;
}

.case-investment__highlight span {
  display: block;
  margin-block-start: 1rem;
  color: rgb(242 232 213 / 68%);
  font-size: clamp(0.75rem, 0.7rem + 0.16vw, 0.9rem);
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.case-investment__ledger {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: clamp(4rem, 9svh, 7rem) 0 0;
  border-block-start: 0.0625rem solid rgb(242 232 213 / 24%);
}

.case-investment__ledger div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: baseline;
  min-width: 0;
  padding: clamp(1rem, 2.4svh, 1.5rem) 0;
  border-block-end: 0.0625rem solid rgb(242 232 213 / 24%);
}

.case-investment__ledger div:nth-child(odd) {
  padding-inline-end: clamp(1.5rem, 4vw, 4rem);
}

.case-investment__ledger div:nth-child(even) {
  padding-inline-start: clamp(1.5rem, 4vw, 4rem);
  border-inline-start: 0.0625rem solid rgb(242 232 213 / 24%);
}

.case-investment__ledger dd {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.5rem, 2.5vw, 2.75rem);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1;
}

.case-transformation {
  padding-block: clamp(11rem, 28svh, 19rem) clamp(10rem, 24svh, 17rem);
}

.case-transformation__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.55fr);
  column-gap: clamp(3rem, 8vw, 10rem);
  row-gap: 0;
  align-items: end;
}

.case-transformation__title {
  grid-column: 1;
  align-self: end;
}

.case-transformation__intro h2 {
  max-inline-size: 13ch;
}

.case-transformation__copy {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  color: var(--case-muted);
  font-size: clamp(1rem, 0.94rem + 0.2vw, 1.18rem);
  line-height: 1.72;
}

.case-gallery {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  margin-block-start: clamp(6rem, 14svh, 10rem);
}

.case-gallery--transformation {
  grid-template-columns: minmax(0, 1.09fr) minmax(0, 1fr);
  align-items: start;
}

.case-gallery--transformation .case-gallery__wide {
  grid-column: 1 / -1;
}

.case-gallery__column {
  display: grid;
  gap: clamp(1rem, 2vw, 2rem);
  align-content: start;
}

.case-gallery__column--primary {
  grid-column: 1;
}

.case-gallery__column--secondary {
  grid-column: 2;
}

.case-gallery__column .case-media {
  grid-column: auto;
  inline-size: 100%;
  margin-block-start: 0;
}

.case-gallery__wide {
  grid-column: 1 / 13;
  aspect-ratio: 16 / 9;
}

.case-gallery__bedroom {
  grid-column: 1 / 8;
  aspect-ratio: 3 / 2;
  margin-block-start: clamp(1.5rem, 3svh, 2.5rem);
}

.case-gallery__kitchen-portrait {
  grid-column: 9 / 13;
  margin-block-start: clamp(2.5rem, 5svh, 4rem);
}

.case-gallery__kitchen {
  grid-column: 5 / 13;
  aspect-ratio: 3 / 2;
  margin-block-start: clamp(2rem, 4svh, 3.5rem);
}

.case-gallery__bath-a {
  grid-column: 1 / 5;
  margin-block-start: clamp(0.75rem, 2svh, 1.5rem);
}

.case-gallery__bath-b {
  grid-column: 6 / 10;
  margin-block-start: clamp(0.75rem, 2svh, 1.5rem);
}

.case-gallery__bath-a,
.case-gallery__bath-b {
  block-size: clamp(34rem, 65.6vw, 52rem);
  aspect-ratio: auto;
}

.case-role {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(4rem, 9vw, 10rem);
  align-items: stretch;
  padding-block: clamp(9rem, 22svh, 15rem);
}

.case-role__media {
  block-size: 100%;
  aspect-ratio: auto;
}

.case-role__content h2 {
  max-inline-size: 12ch;
}

.case-role__copy {
  max-inline-size: 39rem;
  margin-block-start: clamp(2rem, 4svh, 3rem);
  color: var(--case-muted);
  font-size: clamp(1rem, 0.94rem + 0.2vw, 1.18rem);
  line-height: 1.72;
}

.case-role__scope {
  margin: clamp(3rem, 7svh, 5rem) 0 0;
  padding: 0;
  list-style: none;
  border-block-start: 0.0625rem solid var(--case-rule);
}

.case-role__scope li {
  display: grid;
  grid-template-columns: minmax(6.5rem, 0.36fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: baseline;
  padding-block: 1rem;
  border-block-end: 0.0625rem solid var(--case-rule);
}

.case-role__scope span {
  color: rgb(31 31 30 / 52%);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.case-role__scope strong {
  font-size: clamp(0.92rem, 0.86rem + 0.12vw, 1.02rem);
  font-weight: 400;
  line-height: 1.5;
}

.case-result {
  padding-block: clamp(11rem, 28svh, 19rem) clamp(8rem, 20svh, 14rem);
}

.case-result__heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(24rem, 0.75fr);
  column-gap: clamp(3rem, 6vw, 7rem);
  row-gap: 0;
  align-items: end;
}

.case-result__title {
  grid-column: 1;
  align-self: end;
}

.case-result__heading h2 {
  max-inline-size: 11ch;
}

.case-result__copy {
  grid-column: 2;
  grid-row: 1;
  color: var(--case-muted);
  font-size: clamp(1rem, 0.94rem + 0.2vw, 1.18rem);
  line-height: 1.72;
}

.case-result__gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  margin-block-start: clamp(6rem, 14svh, 10rem);
}

.case-result__gallery .case-media {
  aspect-ratio: 3 / 2;
}

.case-result__gallery .case-media:nth-child(2) {
  margin-block-start: 0;
}

.case-sheet {
  display: grid;
  grid-template-columns: minmax(15rem, 0.6fr) minmax(0, 1.4fr);
  gap: clamp(3rem, 8vw, 10rem);
  margin-block-start: clamp(10rem, 24svh, 17rem);
  padding-block-start: clamp(3rem, 7svh, 5rem);
}

.case-sheet__heading h3 {
  max-inline-size: 9ch;
  font-size: clamp(2.8rem, 4.5vw, 5rem);
}

.case-sheet__details {
  margin: 0;
  border-block-start: 0.0625rem solid var(--case-rule);
}

.case-sheet__details div {
  display: grid;
  grid-template-columns: minmax(9rem, 0.48fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: baseline;
  padding-block: clamp(0.9rem, 2svh, 1.25rem);
  border-block-end: 0.0625rem solid var(--case-rule);
}

.case-sheet__details dd {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.25rem, 1.8vw, 1.85rem);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.3;
}

.case-closing-gallery {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(2.5rem, 4vw, 4rem);
  row-gap: clamp(1rem, 2vw, 2rem);
  align-items: start;
  margin-block-start: clamp(10rem, 24svh, 17rem);
}

.case-closing-gallery .case-media {
  inline-size: 100%;
  block-size: clamp(22rem, 46vw, 36rem);
  aspect-ratio: auto;
}

.case-closing-gallery__landscape {
  grid-column: 1 / 9;
  aspect-ratio: 3 / 2;
}

.case-closing-gallery__portrait {
  grid-column: 9 / 13;
  margin-block-end: 0;
}

.case-back-link {
  display: block;
  inline-size: max-content;
  margin-block-start: clamp(7rem, 15svh, 11rem);
  margin-inline: auto;
  padding-block: 0.4rem;
  border-block-end: 0.0625rem solid currentColor;
  color: inherit;
  font-size: clamp(0.75rem, 0.71rem + 0.12vw, 0.86rem);
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 180ms ease;
}

.case-back-link:hover {
  color: var(--orange);
}

.case-back-link:focus-visible {
  outline: 0.125rem solid var(--orange);
  outline-offset: 0.35rem;
}

.case-footer {
  margin-block-start: clamp(3rem, 8svh, 6rem);
}

.case-footer .site-footer__identity {
  opacity: 1;
}

.case-footer .site-footer__logo {
  opacity: 0.22;
}

[data-case-reveal],
[data-case-title-line],
[data-case-hero-media] img,
[data-case-hero-curtain] {
  backface-visibility: hidden;
}

@media (max-width: 64rem) {
  .case-hero__heading,
  .case-transformation__intro,
  .case-result__heading,
  .case-investment__inner,
  .case-role,
  .case-sheet {
    grid-template-columns: minmax(0, 1fr);
  }

  .case-hero__heading {
    grid-template-areas:
      "kicker"
      "title"
      "aside";
  }

  .case-hero__aside {
    inline-size: min(100%, 42rem);
    margin-block-start: 2rem;
  }

  .case-transformation__copy,
  .case-result__copy {
    grid-column: 1;
    grid-row: auto;
    max-inline-size: 42rem;
  }

  .case-investment__highlight {
    margin-block-start: 1rem;
  }

  .case-role__media {
    inline-size: min(100%, 42rem);
  }
}

@media (max-width: 48rem) {
  .case-opening,
  .case-result__gallery,
  .case-investment__ledger {
    grid-template-columns: minmax(0, 1fr);
  }

  .case-opening__body {
    grid-column: 1;
  }

  .case-gallery--transformation {
    grid-template-columns: minmax(0, 1fr);
  }

  .case-gallery--transformation .case-gallery__wide,
  .case-gallery__column {
    grid-column: 1;
  }

  .case-investment__ledger div:nth-child(odd),
  .case-investment__ledger div:nth-child(even) {
    padding-inline: 0;
    border-inline-start: 0;
  }

  .case-chapter__heading,
  .case-chapter__copy,
  .case-context__landscape,
  .case-context__portrait,
  .case-gallery__wide,
  .case-gallery__bedroom,
  .case-gallery__kitchen-portrait,
  .case-gallery__kitchen,
  .case-gallery__bath-a,
  .case-gallery__bath-b,
  .case-closing-gallery__landscape,
  .case-closing-gallery__portrait {
    grid-column: 1 / 13;
  }

  .case-context__portrait,
  .case-gallery__kitchen-portrait,
  .case-gallery__bath-a,
  .case-gallery__bath-b,
  .case-closing-gallery__portrait {
    inline-size: min(78%, 28rem);
  }

  .case-gallery__kitchen-portrait,
  .case-gallery__bath-b,
  .case-closing-gallery__portrait {
    justify-self: end;
  }

  .case-result__gallery .case-media:nth-child(2),
  .case-closing-gallery__portrait {
    margin-block-start: 0;
    margin-block-end: 0;
  }

  .case-closing-gallery .case-media {
    block-size: auto;
  }

  .case-context__landscape,
  .case-context__portrait,
  .case-gallery__bath-a,
  .case-gallery__bath-b {
    block-size: auto;
  }
}