/* Shared proof cards. Homepage and the three practice pages load this
   after their own sheet and before chrome.css. Paper section, no logos. */

.case-card {
  background: var(--paper-2);
  border: 1px solid var(--paper-hairline);
  border-radius: 4px;
  padding: 28px 26px 24px;
  display: flex;
  flex-direction: column;
  transition: background-color var(--motion-duration, 340ms) var(--motion-ease, ease-out), box-shadow var(--motion-duration, 340ms) var(--motion-ease, ease-out);
}

.case-meta {
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: var(--t-11);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.case-teo {
  margin: 0 0 20px;
  display: grid;
  gap: 12px;
}

.case-teo div { margin: 0; }

.case-teo dt {
  margin: 0 0 2px;
  font-family: var(--font-mono);
  font-size: var(--t-11);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.case-teo dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-15);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
}

.case-card blockquote {
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--paper-hairline);
  font-family: var(--font-display);
  font-size: var(--t-20);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.case-attrib {
  margin: 16px 0 0;
  font-family: var(--font-body);
  font-size: var(--t-13);
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink-soft);
}

.case-attrib strong {
  color: var(--ink);
  font-weight: 600;
}

.case-footnote {
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: var(--t-11);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}

.case-card:hover {
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--paper-hairline);
}

.client-work .case-card { max-width: 40rem; }
.cw-grid .case-card { max-width: none; height: 100%; }

/* Three deliverables, one row. Same hairline grid as .points, but three
   columns so the last item is not left alone. */
.leave-grid {
  list-style: none;
  padding: 0;
  margin: 40px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.leave-grid li { background: var(--bg); padding: 28px 24px; }
.leave-grid h3 {
  font-family: var(--font-display);
  font-size: var(--t-20);
  font-weight: 500;
  line-height: 1.35;
  color: var(--white);
  margin: 0 0 10px;
}
.leave-grid p {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-15);
  line-height: 1.55;
  color: var(--text-primary);
}
@media (max-width: 900px) {
  .leave-grid { grid-template-columns: 1fr; }
}