.case-hero { padding: var(--pad); }
.case-category { margin: 0 0 5rem; text-transform: uppercase; font-size: .7rem; letter-spacing: .09em; }
.case-hero h1 { margin: 0 0 2rem; max-width: 11ch; font-size: clamp(4.4rem, 11vw, 11rem); font-weight: 500; line-height: .82; letter-spacing: -.075em; }
.case-visual { aspect-ratio: 16 / 8; margin: 0 calc(-1 * var(--pad)); }
.case-meta { padding: var(--pad); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.case-meta dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--pad); margin: 0; }
.case-meta dt { margin-bottom: .7rem; text-transform: uppercase; font-size: .62rem; letter-spacing: .08em; }
.case-meta dd { margin: 0; font-size: 1rem; }
.case-intro { display: grid; grid-template-columns: 1fr 3fr; gap: var(--pad); padding: clamp(4rem, 10vw, 10rem) var(--pad); border-bottom: 1px solid var(--ink); }
.case-intro h2 { margin: 0 0 3rem; max-width: 17ch; font-size: clamp(2.8rem, 6vw, 6.5rem); font-weight: 500; line-height: .94; letter-spacing: -.06em; }
.case-intro > div > p { max-width: 44rem; margin: 0; font-size: clamp(1rem, 1.5vw, 1.35rem); line-height: 1.6; }
.case-process { padding: var(--pad); border-bottom: 1px solid var(--ink); }
.case-process header { display: grid; grid-template-columns: 1fr 3fr; padding-bottom: clamp(3rem, 8vw, 8rem); }
.case-process header p { margin: 0; text-transform: uppercase; font-size: .66rem; letter-spacing: .08em; }
.case-process header h2 { margin: 0; font-size: clamp(1.7rem, 4vw, 4rem); font-weight: 500; letter-spacing: -.045em; }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.process-grid article { min-height: 18rem; padding: 1rem; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.process-grid article span { font-size: .66rem; }
.process-grid h3 { margin: 5rem 0 1rem; font-size: 1.25rem; font-weight: 500; }
.process-grid p { margin: 0; max-width: 18rem; color: var(--quiet); line-height: 1.55; }
.case-placeholder { min-height: 80svh; display: grid; align-items: center; padding: var(--pad); color: #ecebe6; background: #171714; }
.case-placeholder > p { align-self: start; margin: 0; text-transform: uppercase; font-size: .65rem; letter-spacing: .09em; }
.case-placeholder > div { display: flex; align-items: flex-end; justify-content: center; gap: 1.2vw; height: 45vh; }
.case-placeholder span { width: clamp(2rem, 7vw, 8rem); height: var(--h, 40%); background: var(--acid); }
.case-placeholder span:nth-child(2) { --h: 62%; }.case-placeholder span:nth-child(3) { --h: 88%; }.case-placeholder span:nth-child(4) { --h: 72%; }.case-placeholder span:nth-child(5) { --h: 54%; }
.next-project { min-height: 18rem; display: flex; align-items: center; justify-content: space-between; padding: var(--pad); text-decoration: none; font-size: clamp(3rem, 8vw, 8rem); letter-spacing: -.06em; }
.next-project:hover { color: var(--paper); background: var(--ink); }
@media (max-width: 720px) {
  .case-visual { aspect-ratio: 4 / 3; }
  .case-meta dl { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
  .case-intro, .case-process header { grid-template-columns: 1fr; gap: 3rem; }
  .process-grid { grid-template-columns: 1fr 1fr; }
  .process-grid article { min-height: 14rem; }
  .next-project { min-height: 12rem; }
}