/* Case study frame, shared by /projects/* pages */
.case {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  width: 1200px;
  padding: 25px;
  overflow: hidden;
}

/* Case header: project name, title and Client / Role / Tools, all on the text's left edge */
.case-head { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 0 20px; }
.case-kicker { font: 500 15px/1.2em "Inter", sans-serif; color: rgba(26, 26, 26, .5); }
.case-title { margin-top: 10px; max-width: 860px; font: 400 36px/1.2em "Satoshi", sans-serif; color: var(--ink); letter-spacing: -.01em; }

/* Client / Role / Tools: one row of labelled columns */
.case-meta { display: flex; flex-wrap: wrap; gap: 16px 48px; width: 100%; margin: 28px 0 0; padding: 0; }
.case-meta div { display: flex; flex-direction: column; gap: 6px; }
.case-meta dt { font: 500 13px/1.2em "Inter", sans-serif; color: rgba(26, 26, 26, .45); }
.case-meta dd { margin: 0; font: 500 16px/1.3em "Satoshi", sans-serif; color: var(--ink); }

.case-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  width: 100%;
  padding: 20px;
  overflow: hidden;
  /* divider drawn inside the box, takes no layout space */
  box-shadow: inset 0 -1px rgba(77, 77, 77, .11);
}

.case-text { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.case-text h2 { font: 500 24px/1.2em "Inter", sans-serif; color: var(--ink); }
.case-text p { font: 400 16px/1.2em "Satoshi", sans-serif; color: var(--ink); }

@media (max-width: 1199.98px) {
  .case { width: 800px; }
  .case-title { font-size: 30px; }
}
@media (max-width: 809.98px) {
  /* Phones: the page gutter is enough, text and media use the full width */
  .case { width: 100%; padding: 25px 0; }
  .case-head { padding: 0; }
  .case-section { padding: 20px 0; }
  .case-title { font-size: 26px; }
  .case-meta { gap: 14px 32px; margin-top: 22px; }
}