/* Case-study composition; proposed tokens and pattern: design/PROPOSALS.md P-005. */
.case-study {
  --case-unit: 0.5rem;
  --case-small: 0.75rem;
  --case-label: 0.875rem;
  --case-text: 1.125rem;
  --case-lead: 1.375rem;
  --case-heading: clamp(1.875rem, 3vw, 3rem);
  --case-display: clamp(4.5rem, 8vw, 7.5rem);
  --case-space: clamp(4rem, 8vw, 8rem);
  --case-top: 10rem;
  --case-line: 1px;
  --case-focus: 2px;
  --case-muted: #a5a5a5;
  --case-rule: #292929;
  --case-paper: #e8edf2;
  --case-track: -0.035em;
  --chrome-fade: 6rem;
}
.case-backengine { --case-display: clamp(3rem, 7vw, 7.5rem); }
.case-main { padding: var(--case-top) var(--content-x) 0; }
.case-copy { max-width: var(--copy-w); margin-inline: auto; }
.case-back { display: inline-flex; align-items: center; min-height: calc(var(--case-unit) * 6); color: var(--case-muted); text-decoration: none; font-size: var(--case-label); }
.case-back:hover, .case-back:focus-visible { color: #fff; }
.case-title-row { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: space-between; gap: calc(var(--case-unit) * 2); margin-top: calc(var(--case-unit) * 5); }
.case-title-row h1 { font-size: min(var(--case-display), 19vw); line-height: 1; font-weight: 500; letter-spacing: var(--case-track); }
.case-eyebrow { font-size: var(--case-label); font-weight: 400; color: var(--case-muted); line-height: 1.5; }
.case-headline { font-size: var(--case-heading); line-height: 1.1; letter-spacing: var(--case-track); font-weight: 400; margin-top: calc(var(--case-unit) * 5); }
.case-lead { font-size: var(--case-lead); line-height: 1.5; font-weight: 300; color: var(--case-muted); max-width: 43ch; margin-top: calc(var(--case-unit) * 3); }
.case-facts { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: calc(var(--case-unit) * 4); margin-block: calc(var(--case-unit) * 6); padding-top: calc(var(--case-unit) * 3); border-top: var(--case-line) solid var(--case-rule); font-size: var(--case-label); line-height: 1.5; }
.case-facts dt { color: var(--case-muted); margin-bottom: var(--case-unit); }
.case-facts a { text-underline-offset: var(--case-unit); }
.case-facts a:hover { color: var(--case-muted); }
.case-figure { margin: 0; }
.case-figure + .case-figure { margin-top: calc(var(--case-unit) * 5); }
.case-image-link { display: block; background: var(--case-paper); cursor: zoom-in; }
.case-image-link img { display: block; width: 100%; height: auto; }
.case-figure figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--case-unit) * 3); padding: calc(var(--case-unit) * 2) 0 0; color: var(--case-muted); font-size: var(--case-small); line-height: 1.5; }
.case-number { margin-right: var(--case-unit); font-variant-numeric: tabular-nums; }
.case-figure figcaption a { flex-shrink: 0; display: inline-flex; align-items: center; min-height: calc(var(--case-unit) * 6); text-decoration: none; }
.case-figure figcaption a:hover { color: #fff; }
.case-section { padding-block: var(--case-space); }
.case-section h2 { font-size: var(--case-heading); line-height: 1.15; font-weight: 400; letter-spacing: var(--case-track); margin-block: calc(var(--case-unit) * 3); }
.case-text-columns { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--case-unit) * 5); }
.case-text-columns p, .case-body { font-size: var(--case-text); line-height: 1.65; font-weight: 300; color: var(--case-muted); }
.case-body { max-width: 55ch; }
.case-ending .ghost .acc-go-full { display: inline; }
.case-ending .ghost { margin-top: calc(var(--case-unit) * 4); min-height: calc(var(--case-unit) * 6); }
.case-contact { border-top: var(--case-line) solid var(--case-rule); padding-block: var(--case-space); }
.case-contact .cta-xl { display: inline-block; margin-block: calc(var(--case-unit) * 3); font-size: clamp(2rem, 5vw, 5rem); }
.case-contact .case-back { display: flex; width: fit-content; }
html.case-study .foot { position: relative; padding-top: 0; padding-bottom: calc(var(--case-unit) * 4); background: none; }
.case-study a:focus-visible { outline: var(--case-focus) solid #fff; outline-offset: calc(var(--case-unit) / 2); }
.case-skip { position: fixed; z-index: 20; top: var(--case-unit); left: var(--case-unit); padding: calc(var(--case-unit) * 2); background: #fff; color: #000; transform: translateY(-200%); }
.case-skip:focus { transform: none; }
/* No added scroll or image animations: the content stays readable without JS. */
@media (max-width: 47.99em) {
  .case-study { --case-top: 9rem; --case-space: 4rem; }
  .case-title-row { flex-direction: column; gap: calc(var(--case-unit) * 2); }
  .case-headline br, .case-section h2 br { display: none; }
  .case-facts { grid-template-columns: 1fr 1fr; gap: calc(var(--case-unit) * 3); }
  .case-facts > :last-child { grid-column: 1 / -1; }
  .case-text-columns { grid-template-columns: 1fr; gap: calc(var(--case-unit) * 3); }
  .case-figure { margin-inline: calc(var(--case-unit) * 5 - var(--content-gap)); }
  .case-figure figcaption { flex-direction: column; gap: var(--case-unit); }
  .case-figure figcaption > span { max-width: 100%; }
}

.case-testimonial blockquote { margin-block: calc(var(--case-unit) * 3) calc(var(--case-unit) * 4); font-size: var(--case-heading); line-height: 1.35; font-weight: 300; letter-spacing: var(--case-track); }
.case-testimonial figcaption { display: flex; align-items: center; gap: calc(var(--case-unit) * 3); font-size: var(--case-text); line-height: 1.5; }
.case-testimonial figcaption img { width: calc(var(--case-unit) * 8); height: calc(var(--case-unit) * 8); flex-shrink: 0; border-radius: 50%; object-fit: cover; }